Deekshith's avatar

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">&times;</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?

0 likes
0 replies

Please or to participate in this conversation.