• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 83
  • Last Modified:

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
0
Michael Sterling
Asked:
Michael Sterling
  • 3
  • 2
1 Solution
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now