Input type = "file" automatically loses the file?
I have two file inputs of type, one in partial view and the other on the main page
Partial view
<input type="file" name="image" id="image" onchange="readURL(this)"/>
On the home page
<input type="file" name="userProfilePic" id="userProfilePic" style="display:none" />
What I want is that when the user changes image/file
to upload the visible file, it image/file
should be updated on the main / other input. Here is my code.
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#imagePreview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
// window['profilePic'] = input.files[0];
$('#userProfilePic').get(0).files[0] = input.files[0];
return false;
}
Mistake
The error is rather strange, when I open the console and check the files, it shows up somewhere, but after a minute it doesn't.
In the console window
$('#userProfilePic').get(0).files[0]
File (file object details)
....
(after a second)
$('#userProfilePic').get(0).files[0]
undefined
And this is not just the first time. Let's say sometimes, it shows the values 5-6 times, then for the 7th time it won't ...
$('#userProfilePic').get(0).files[0]
File (file object details)
....
(after a second)
$('#userProfilePic').get(0).files[0]
File (file object details)
....
(after a second)
$('#userProfilePic').get(0).files[0]
File (file object details)
....
(after a second)
$('#userProfilePic').get(0).files[0]
undefined
For all the code, I have no other code. Now, as you can see in the code, I am also setting window[profilePic]
to a file object. But if I check it in the console window it always shows no matter what happens? How does this happen?
Problem
I need to submit a form, but when I do, the image (input file) is submitted as null, but sometimes as a valid file. As I explained earlier, when I check the value in the console, it is displayed for the first time or some random number of times, then suddenly it disappears and the variable I set in the window ( window[profilePic]
) always has this object file.
In case anyone is wondering, the original / visible input of the file, where the user actually selects the file, always matters.
source to share
You cannot do this for security reasons, all files uploaded via input type="file"
must be done manually by the user.
However, while the user will upload the image anyway, you have to complete the whole process you want in the server side script.
for more information please refer to this post here:
source to share
Why are you trying to use two input files for the same file?
if you try to render a form in PartialView with input file and additional data? I answered a very similar question:
File upload in MVC when used in bootstrap modal returns null
1) make a model for use in a form with all elements for a form,
2) declare the model on the first line in partial view
3) pass the model to the post function as a parameter.
4) you are using a partial view, it is possible to use this view on different pages, you need to specify the control to process the form.
Example in code:
Model:
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
public class PartialFormModel
{
[Required]
[StringLength(200)]
public string FileName { get; set; }
[StringLength(200)]
public string Title { get; set; }
[StringLength(1000)]
public string Description { get; set; }
public int? Order { get; set; }
[NotMapped]
public HttpPostedFileBase ImageFile { get; set; }
}
PartialView:
@model YOURSPACENAME.Models.PartialFormModel
@using (Html.BeginForm("YourActionName", "YourControllerName", FormMethod.Post, new { @class = "form-horizontal", @role = "form", @enctype="multipart/form-data" }))
{
@Html.AntiForgeryToken()
<div class="form-group">
@Html.LabelFor(model => model.FileName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.FileName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.FileName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.ImageFile, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.ImageFile, new { @class = "form-control", type = "file" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
}
CONTROLLER
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult YourActionName(PartialFormModel obj)
{
if (ModelState.IsValid)
{
//your options
}
return PartialView("_EditSlider");
}
source to share
Considering that:
- For security reasons, you cannot set
value
to entertype="file"
programmatically. - Changing the type
<input>
causes a security error in some browsers (older versions of IE and Firefox).
I do not know what do you want. But I encourage you to create a new element input
, set its type to whatever you want, say file
, and set its properties according to your needs. eg:
<script>
function createInputType(_type, _value, _name, _id, _class) {
var newObject = document.createElement('input');
newObject.type = _type;
newObject.value = _value;
newObject.name = _name;
newObject.id = _id;
newObject.className = _class;
return newObject;
}
</script>
source to share