Jun 28, 2021
0
Level 5
dynamic edit file submit jquery bluimp file upload in file listing
i have a file listing with edit button like below,
File 1 with input name of file uuid=> edit button
File 2 with input name of file uuid=> edit button
File 3 with input name of file uuid=>edit button
On click of edit button i will display the file select and drag and drop box to change the uploaded file, check the code below,
<div id="figures_list">
@forelse($articlesubmission->figures as $fig)
<div class="file-wrapper">
<div class="file-row">
<p><a href="{{ url('submission/view-submission-figures') }}/{{ $articlesubmission->uuid }}/{{ $fig->figure_submit_id }}" target="_blank">{{ $fig->figure_name }} ({{ $fig->figure_size }} KB)</a><a href="#" onclick="removeFigure(event,'{{ $fig->figure_submit_id }}');"> <i class="fa fa-trash"></i></a>
<a href="#" onclick="changeFigureFile(event,'{{ $fig->figure_submit_id }}');" class="btn btn-danger btn-sm" > Change</a>
</p>
</div>
</div>
<div class="clearfix"></div><br />
{{-- change figure file block --}}
<div class="form-group row changefigdiv alert-dismissible fade" id="changefigdiv_{{ $fig->figure_submit_id }}" style="display:none;">
<!--Close Icon-->
<form id="figurelistform" class="figurelistform">
@csrf
<input type="hidden" id="editfilesubmituuid_{{ $fig->figure_submit_id }}" name="editfilesubmituuid" value="0" />
<input type="hidden" name="journaluuid" value="{{ $articlesubmission->journaldetail->journal_uuid }}" />
<div class="col-md-8">
<button type="button" class="btn close" onclick="closechangefile('changefigdiv','{{ $fig->figure_submit_id }}')">
<span aria-hidden="true">×</span>
</button>
<div id="changefigurefile_{{ $fig->figure_submit_id }}" class="dropblock changefigurefile">
<small>Drop files here (To replace/change)</small>
<p>OR</p>
<span class="button btn-blue input-file">
Browse Files (To replace/change) <input id="figurechangefile" class="figurechangefile" type="file" name="figurechangefile" required>
</span>
@if($articlesubmission->journaldetail)
<small>(Allowed file extensions: {{ journalconfig('supporting_formats', $articlesubmission->journaldetail->journal_uuid) }})</small>
@endif
</div>
</div>
</form>
</div>
<span class="errorspan editfigureerror" style="color:red;" id="editfigureerror" role="alert"></span>
@empty
<p>No Figures added. Upload here</p>
@endif
</div>
and now as this is dynamic list i have used class name in jquery code like below,
$('.figurechangefile').fileupload({
url: "{{ url('submission/change-figure') }}",
dataType: 'json',
dropZone: $('.changefigurefile'),
// multipart : true,
add: function(e, data) {
// spinner.show();
$('#figloading').text('Uploading...');
data.formData = $(".figurelistform").serializeArray();
data.submit();
},
done: function(e, data) {
spinner.hide();
$('#figloading').text('');
console.log(data);
if (data.result.status == 500) {
printErrorMsg(data.result.info, 'print-error-msg');
$('#figloading').text('');
return false;
} else if (data.result.status == 600) {
$('#figloading').text('');
window.location.href = "{{ url('/home') }}";
} else if (data.result.status == 200) {
$('#figure_ids').val('');
$('#figures_list').empty();
$('#figure_list_outer_div').empty().append(data.result.files);
$('#figloading').text('');
// $("#figures_list").load(location.href + " #figures_list");
} else {
window.location.href="{{ url('/home') }}";
}
},error: function (e, data) {
spinner.hide();
// console.log(e);
$('#figloading').text('');
if (e.status == 422) {
$.each(e.responseJSON.errors, function(key, val) {
$('.editfigureerror').text(val[0]);
// $("#" + key + "_error").text(val[0]);
});
} else {
alert(e.responseJSON.message);
}
return false;
}
});
but when i select the file it is considering the first file data only. if i select second file and click edit and select the file then it is taking the form data of first file not second file. how can i solve this issue?
Please or to participate in this conversation.