3

I'm running into an issue on a particular form.

If the form is submitted and there is an error with the form (maybe I forgot to fill in a required field), then the form reloads with the errors as it's supposed to. However, any image you had previously selected, disappears and needs to be reselected.

Before submitting form with errors:

enter image description here

After submitting form with errors:

enter image description here

This is the HTML tag being used:

<input type="file" accept="image/*" id="Image" name="Image"/>

What I need is for the image selector to still maintain the selected image between submits. Is there a good way to do this? Is there a way to save the file path to the session perhaps and fill it into the element again?

Improve this question

3 Answers 3

Reset to default
2

Browsers will not allow file upload fields to be restored automatically as a security measure. To prevent losing the file from validation, either perform all validation on the client side (though you should always validate again on the server) so the form is never submitted until everything is correct or you have to grab the file(s) that are submitted the first time and hold on to them until the form finally comes through with all validation completed.

In this second case you have a couple options:

  1. Save the contents somewhere and return a unique ID pointer to be held in a hidden field when you return the form. You should also consider putting a visible label that shows what file has already been uploaded. You will have to clean up uploads periodically from users who give up and come back later (and thus won't be submitting a form with that correlation ID for you to match up the upload).

  2. Base64 encode the contents of the uploaded file and return that to the view in a hidden field. This is more bandwidth intensive but it doesn't require you to store a file on your server that may never be correlated to a proper form. You might also be able to display that same image in the returned view since I believe you can specify a Base64 encoded image as the source for an image tag (or maybe CSS attribute). This might be browser specific.

As long as your file uploads are limited in size (100kb for instance) option 2 is my favored approach. It's not much bigger than all the modern JavaScript libraries that are included in a page and is a better experience for the user while leaving your server dumb of sessions, cleanup or excessive processing.

Edit: Many sites that allow uploading of images also provide validation on file size and kick it back if it's oversized. In this case the user has feedback that their asset has not been stored and you're free from having to encode and return it.

Edit 2:

Here's a post about browsers marking the file upload control value field as read-only and preventing this from being modified by JavaScript (it can only be modified by direct user action).

And here's a SO comment about using Base64 encoded image in HTML directly. The question asker is looking for a way to put the data in a separate file but this isn't what you want. The 'this works' portion is what I was referring to in Option 2 above.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

I think you can use the hidden field and display the file selected in the label. When after validation get the content of the file and save it in the Session or some temp place . Then while showing the page so on the label the file path what user has selected earlier and update the same in the hidden field . If the user submit the form again check first if the file is NULL but hidden field value is there , it means you have save the file earlier, If the path is different from the hidden field you may have to get the file content again.

Just saving the path will not help you have to save the file stream uploaded first time . I think if your user will be delight with not loading the file again you have to pay something from your server resource :)

Improve this answer

Comments

1

The only way you can do this is to provide validation on client side. It is because submit to server "sends" already a form, and resend it back with errors. As it was pointed out in comment, the file is cleared because of security (thanks Eric)

To do client side validation in MVC 3 you can use unobstuctive jquery validation. To do this just add in web.config:

<appSettings>
  <add key="ClientValidationEnabled" value="true" />
  <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
Improve this answer

1 Comment

It's not to avoid uploading and downloading, it's a security measure to keep pages from maliciously guessing an upload path and forcing your browser to upload files on submit.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.