How do I save my shuffled / reordered images?

the big picture / the short question: How do I save images to a directory?

details: I've managed to upload some images, to a page, by dynamically generating the <img> tags for each image (the HTML) and adding the HTML to the 'innerHTML' property of a <div> on my page:

        protected void Page_Load(object sender, EventArgs e)
        {
            filePaths = Directory.GetFiles(@"C:\Teamwork\TruckInspectionWEB\InspectionImagesNew\4V4NCNCTEST987654\");

            if (filePaths.Length != 0)
            {
                foreach (string filename in filePaths)
                {
                    if (!filename.Contains("Thumbs.db"))
                        ConvertToThumbnail(filename, filename, 120);
                }

                foreach (string filename in filePaths)
                {
                    if (!filename.Contains("Thumbs.db"))
                    {
                        intFileCount += 1;
                        strMyDivHTML = strMyDivHTML + "<img id =\"image_" + intFileCount.ToString()  + "\" src=\"InspectionImagesNew/4V4NCNCTEST987654/" +
                            filename.ToString().Substring(69, filename.ToString().Length - 69) +
                            "\" alt=\"" + filename.ToString().Substring(69, 5) + "\" />";
                    }
                }
            }
            sortable.InnerHtml = strMyDivHTML;
        }

Open in new window


I then allow the user to shuffle the images using some jQuery and the <div> tag's ID:

    <script src="Scripts/jquery-1.11.2<wbr ></wbr>.min.js" type="text/javascript"></s<wbr ></wbr>cript>
    <script src="Scripts/jquery-ui-1.1<wbr ></wbr>1.3.js" type="text/javascript"></s<wbr ></wbr>cript>
    <link href="Styles/jquery-ui.the<wbr ></wbr>me.css" rel="stylesheet" type="text/css" />
.
.
.
        $(document).ready(function<wbr ></wbr> () {
            $("#sortable").sortable({
                // code to run when the order is updated
                update: function (event, ui) {
                    // get the order of the items in the list
                    var data = $(this).sortable('serializ<wbr ></wbr>e');
                    // pass the data back to your server for processing
                    $('#data').html(data);
                    });
                }
            });
.
.
.
    <div runat="server" id="sortable"></div>
    <div runat="server" id="data"></div>

Open in new window


I now need to save the newly sorted images back to the directory from which they came and unless I'm mistaken, I'm going to have to rename them so that the order in which I save them, will be the order in which they are, ordered in the directory. So if I have: [imageA, imageB, imageC] and I shuffle them on the page to look like: [imageC, imageB, imageA], i'm actually going to have to switch the actual names of images A, and C so that the order is correct. How do I do this? I'm including a couple images so that you can see I do have the reordered list "saved" on the page but I don't know what to do with it to get it saved back to the directory in the correct order.

original image ordershuffle image 5 to 2nd positionshuffle image 3 to first position
LVL 1
Michael SterlingWeb Applications DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michael FowlerSolutions ConsultantCommented:
Another way of solving this could be to store a file (eg csv) of file paths which holds the files in order. You could then open this file, split the entries into an array and iterate the array to display them.

This would save you having to rename files, make it simple to edit the order.
0
Michael SterlingWeb Applications DeveloperAuthor Commented:
I think I understand your suggestion. I think you're saying put the re-ordered images (paths) into a text file and then save them back to the directory? I may not completely understand your over all idea. The problem is that the directory is displaying the images, in alphabetical order, so unless I can find a way to alter that behavior, I think I am going to have to rename the images. No?
0
Michael FowlerSolutions ConsultantCommented:
My idea is

Create a text file
Place the file paths to the images into this file in the display order with one file path per per line
Read the file into a collection (eg List) in the order from the file
Loop through the collection to display the files rather than reading the file paths directly from the directory
Whenever you want to update the order just overwrite the contents of the text file with the contents of your collection.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Michael SterlingWeb Applications DeveloperAuthor Commented:
I was able to solve this elsewhere. See thread ID: 28640818, how ever I will award the points to you as I'm sure your solution will work as well and may still be part of what I ultimately wind up doing. Thank you.
0
Michael SterlingWeb Applications DeveloperAuthor Commented:
I was able to solve this elsewhere. See thread ID: 28640818, how ever I will award the points to you as I'm sure your solution will work as well and may still be part of what I ultimately wind up doing. Thank you.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
C#

From novice to tech pro — start learning today.