All.
(Downloadable Project code Upload Images with Title and Description (vb.net)
Originated from "blueimp/jQuery-File-Upload")
I am working on this Image Upload project with some text fields to insert their values into a database.
The working example above is without the database.
Upload Images with Title and Description.
The fields are shown on the page when the images are loaded.
However, they duplicate the values on all images when uploaded, as I am uncertain about handling the list of populated fields.
In the project, WebForm1.aspx, in the template-upload portion.
Lines 144-149
I added the following for the fields to appear when images are uploaded. In asp classic, we would add a number or field identifier to the field ID to pass to our code-behind. However, I am uncertain how to add that here. I could add the image name to the id, as it would change for each image added. But I could not get that to work.
<td>
<input type ="text" name="ImageTitle" id="ImageTitle" value="Give Image a Title" />
</td>
<td>
<input type ="text" name="ImageDesc" id="ImageDesc" value="Give Image a Description" />
</td>
In the UploaderOne.ashx.vb Lines 15, 16, and then 20
15 Dim ImageTitle As String = context.Request.Form("ImageTitle")
16 Dim ImageDesc As String = context.Request.Form("ImageDesc")
20 .Name = file.FileName + " - " + ImageTitle + " - " + ImageDesc,
Line 20, I added the ImageTitle & ImageDesc to the output to ensure I am getting some return from the fields. Next, I need to work with the array, which I am unsure of.
I found this thread Adding Title field to each individual file by Jquery File Upload?
I am looking over it and the link provided by the author at the moment. Hopefully, I can get what I need from it.
Updated and Working
Updated the code in the WebForm1.aspx to the following.
The main focus is on these lines.
<td class="title">input type ="text" name="ImageTitle[]">
<td class="desc">input type ="text" name="ImageDesc[]">
As noticed, each has a class and then the [] added to the names.
<td class="title">
<input type ="text" name="ImageTitle[]" id="ImageTitle" value="Give Image a Title" required/>
</td>
<td class="desc">
<input type ="text" name="ImageDesc[]" id="ImageDesc" value="Give Image a Description" required/>
</td>
And then added this to the very bottom of the body.
<script type="text/javascript">
$('#fileupload').bind('fileuploadsubmit', function (e, data) {
var inputs = data.context.find(':input');
if (inputs.filter(function () {
return !this.value && $(this).prop('required');
}).first().focus().length) {
data.context.find('button').prop('disabled', false);
return false;
}
data.formData = inputs.serializeArray();
});
</script>
In the UploadOne.ashx.vb.
Dim ImageTitle As String = context.Request.Form("ImageTitle[]")
Dim ImageDesc As String = context.Request.Form("ImageDesc[]")
And ran a test, and it WORKS!! Each field represents each image uploaded, works like a charm.
EE