Level 75
Have you considered switching to intervention or another newer package. Seems imageuplodify is an older package, last updated 2016. Just a thought.
Oct 28, 2019
4
Level 1
Multiple upload problem - imageuploadify - the order is broken
I have a problem with my imageuploadify. When I upload one photo, the order of images is good, the last is always the last. But, if I want to upload images, the order is broken. The last become the second, or other orders.
Here I have some images : 
Here is my code
<span id="images-campaigns-file" style="display:none;">
<h4 class="h6 g-font-weight-600 g-color-black g-mb-20">Upload Campaigns</h4>
<input type="file" accept="image/*" name="campaigns[]" id="campaigns" multiple>
<hr>
<div class="md-col">
<div class="row">
@foreach($model_campaign as $key => $image)
<div class="col-md-4 g-mb-30 item-campaign-{{$key}}">
<div class="d-flex flex-wrap h-100 g-brd-around g-brd-gray-light-v7 g-rounded-2 g-pa-25">
<header class="w-100 align-self-start text-right justify-content-end g-pos-rel g-mb-10">
<div class="g-pos-rel g-z-index-2">
<a id="dropDownCampaign{{$key}}Invoker" class="u-link-v5 g-line-height-0 g-font-size-24 g-color-gray-light-v6 g-color-lightblue-v3--hover" href="#!" aria-controls="dropDownCampaign{{$key}}" aria-haspopup="true" aria-expanded="false" data-dropdown-event="click" data-dropdown-target="#dropDownCampaign{{$key}}"
data-dropdown-type="jquery-slide">
<i class="hs-admin-more-alt"></i>
</a>
<div id="dropDownCampaign{{$key}}" class="u-shadow-v31 g-pos-abs g-right-0 g-bg-white u-dropdown--jquery-slide u-dropdown--hidden" aria-labelledby="dropDownCampaign{{$key}}Invoker" style="display: none;">
<ul class="list-unstyled g-nowrap mb-0">
<li>
<a class="d-flex align-items-center u-link-v5 g-bg-gray-light-v8--hover g-font-size-12 g-font-size-default--md g-color-gray-dark-v6 g-px-25 g-py-14 crop_modal" href="javascript:void(0);" data-target="#modal-campaign-{{$key}}" data-toggle="modal" onclick="openmodalCampaign({{$key}});">
<i class="hs-admin-pencil g-font-size-18 g-color-gray-light-v6 g-mr-10 g-mr-15--md"></i>
Edit
</a>
</li>
<li>
<a class="d-flex align-items-center u-link-v5 g-bg-gray-light-v8--hover g-font-size-12 g-font-size-default--md g-color-gray-dark-v6 g-px-25 g-py-14" href="javascript:void(0);" onclick="deleteMedia('{{ url('admin/delete-model-media') }}/{{ $image->id }}/{{ $model->id }}', {{$key}});">
<i class="hs-admin-trash g-font-size-18 g-color-gray-light-v6 g-mr-10 g-mr-15--md"></i>
Delete
</a>
</li>
</ul>
</div>
</div>
</header>
<section class="w-100 align-self-center text-center g-color-darkblue-v2 g-mb-30">
<img class="img-fluid g-rounded-2" src="{{ url('images/model') }}/{{ $image->name }}" alt="Image description">
</section>
</div>
</div>
<div class="modal fade" id="modal-campaign-{{$key}}" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">Edit Image</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="img-container">
<img id="image-campaign-{{$key}}" src="{{ url('images/model') }}/{{ $image->name }}" alt="Picture">
</div>
<br>
<div class="row" id="actions">
<div class="col-md-12 docs-buttons">
<div class="btn-group">
<button type="button" class="btn btn-primary" data-method="setDragMode" data-option="move" title="Move" onclick="cropper_campaign_{{$key}}.setDragMode('move')">
<span class="docs-tooltip" data-toggle="tooltip" title="cropper.setDragMode("move")">
<span class="fa fa-arrows"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="setDragMode" data-option="crop" title="Crop" onclick="cropper_campaign_{{$key}}.setDragMode('crop')">
<span class="docs-tooltip" data-toggle="tooltip" title="cropper.setDragMode("crop")">
<span class="fa fa-crop"></span>
</span>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1" title="Zoom In" onclick="cropper_campaign_{{$key}}.zoom(0.1);">
<span class="docs-tooltip" data-toggle="tooltip" title="cropper.zoom(0.1)">
<span class="fa fa-search-plus"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1" title="Zoom Out" onclick="cropper_campaign_{{$key}}.zoom(-0.1);">
<span class="docs-tooltip" data-toggle="tooltip" title="cropper.zoom(-0.1)">
<span class="fa fa-search-minus"></span>
</span>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" data-method="move" data-option="-10" data-second-option="0" title="Move Left" onclick="cropper_campaign_{{$key}}.move(-10, 0);">
<span class="docs-tooltip" data-toggle="tooltip" title="cropper.move(-10, 0)">
<span class="fa fa-arrow-left"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="move" data-option="10" data-second-option="0" title="Move Right" onclick="cropper_campaign_{{$key}}.move(10, 0);">
<span class="docs-tooltip" data-toggle="tooltip" title="cropper.move(10, 0)">
<span class="fa fa-arrow-right"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="-10" title="Move Up" onclick="cropper_campaign_{{$key}}.move(0, -10);">
<span class="docs-tooltip" data-toggle="tooltip" title="cropper.move(0, -10)">
<span class="fa fa-arrow-up"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="10" title="Move Down" onclick="cropper_campaign_{{$key}}.move(0, 10);">
<span class="docs-tooltip" data-toggle="tooltip" title="cropper.move(0, 10)">
<span class="fa fa-arrow-down"></span>
</span>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" data-method="rotate" data-option="-45" title="Rotate Left" onclick="cropper_campaign_{{$key}}.rotate(-45);">
<span class="docs-tooltip" data-toggle="tooltip" title="cropper.rotate(-45)">
<span class="fa fa-rotate-left"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="rotate" data-option="45" title="Rotate Right" onclick="cropper_campaign_{{$key}}.rotate(45);">
<span class="docs-tooltip" data-toggle="tooltip" title="cropper.rotate(45)">
<span class="fa fa-rotate-right"></span>
</span>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" data-flip="horizontal" data-method="scaleX" data-option="-1" title="Flip Horizontal" onclick="cropper_campaign_{{$key}}.scaleX(-1);">
<span class="docs-tooltip" data-toggle="tooltip" title="cropper.scaleX(-1)">
<span class="fa fa-arrows-h"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-flip="vertical" data-method="scaleY" data-option="-1" title="Flip Vertical" onclick="cropper_campaign_{{$key}}.scaleY(-1);">
<span class="docs-tooltip" data-toggle="tooltip" title="cropper.scaleY(-1)">
<span class="fa fa-arrows-v"></span>
</span>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" data-method="crop" title="Crop" onclick="cropper_campaign_{{$key}}.crop();">
<span class="docs-tooltip" data-toggle="tooltip" title="cropper.crop()">
<span class="fa fa-check"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="clear" title="Clear" onclick="cropper_campaign_{{$key}}.clear();">
<span class="docs-tooltip" data-toggle="tooltip" title="cropper.clear()">
<span class="fa fa-remove"></span>
</span>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" data-method="disable" title="Disable" onclick="cropper_campaign_{{$key}}.disable();">
<span class="docs-tooltip" data-toggle="tooltip" title="cropper.disable()">
<span class="fa fa-lock"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="enable" title="Enable" onclick="cropper_campaign_{{$key}}.enable();">
<span class="docs-tooltip" data-toggle="tooltip" title="cropper.enable()">
<span class="fa fa-unlock"></span>
</span>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" data-method="reset" title="Reset" onclick="cropper_campaign_{{$key}}.reset();">
<span class="docs-tooltip" data-toggle="tooltip" title="cropper.reset()">
<span class="fa fa-refresh"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="destroy" title="Destroy" onclick="cropper_campaign_{{$key}}.destroy();">
<span class="docs-tooltip" data-toggle="tooltip" title="cropper.destroy()">
<span class="fa fa-power-off"></span>
</span>
</button>
</div>
</div><!-- /.docs-buttons -->
</div>
<br>
<div class="row">
<div class="col-md-12 docs-buttons">
<div class="btn-group btn-group-crop">
<button type="button" class="btn btn-primary" data-method="getCroppedCanvas" onclick="cropper_campaign_{{$key}}.getCroppedCanvas();">
<span class="docs-tooltip" data-toggle="tooltip" title="cropper.getCroppedCanvas()">
Get Cropped Canvas
</span>
</button>
<button type="button" class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ "width": 160, "height": 90 }" onclick="cropper_campaign_{{$key}}.getCroppedCanvas({ width: 160, height: 90 });">
<span class="docs-tooltip" data-toggle="tooltip" title="cropper.getCroppedCanvas({ width: 160, height: 90 })">
160×90
</span>
</button>
<button type="button" class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ "width": 320, "height": 180 }" onclick="cropper_campaign_{{$key}}.getCroppedCanvas({ width: 320, height: 180 });">
<span class="docs-tooltip" data-toggle="tooltip" title="cropper.getCroppedCanvas({ width: 320, height: 180 })">
320×180
</span>
</button>
</div>
<!-- Show the cropped image in modal -->
<div class="modal fade docs-cropped" id="getCroppedCanvasModal" role="dialog" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content modal-lg">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="getCroppedCanvasTitle">Cropped</h4>
</div>
<div class="modal-body" id="cropresult"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
{{-- <a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.jpg">Download</a> --}}
</div>
</div>
</div>
</div><!-- /.modal -->
<button type="button" class="btn btn-primary" data-method="moveTo" data-option="0" onclick="cropper_campaign_{{$key}}.moveTo(0);">
<span class="docs-tooltip" data-toggle="tooltip" title="cropper.moveTo(0)">
0,0
</span>
</button>
<button type="button" class="btn btn-primary" data-method="zoomTo" data-option="1" onclick="cropper_campaign_{{$key}}.zoomTo(1);">
<span class="docs-tooltip" data-toggle="tooltip" title="cropper.zoomTo(1)">
100%
</span>
</button>
<button type="button" class="btn btn-primary" data-method="rotateTo" data-option="180" onclick="cropper_campaign_{{$key}}.rotateTo(180)">
<span class="docs-tooltip" data-toggle="tooltip" title="cropper.rotateTo(180)">
180°
</span>
</button>
<div class="btn-group btn-group-justified" data-toggle="buttons">
<button class="btn btn-primary active" onclick="cropper_campaign_{{$key}}.setAspectRatio(16/9);">
<input type="radio" class="sr-only" id="aspectRatio0" name="aspectRatio" value="1.7777777777777777" checked>
<span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: 16 / 9">
16:9
</span>
</button>
<button class="btn btn-primary" onclick="cropper_campaign_{{$key}}.setAspectRatio(4/3);">
<input type="radio" class="sr-only" id="aspectRatio1" name="aspectRatio" value="1.3333333333333333">
<span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: 4 / 3">
4:3
</span>
</button>
<button class="btn btn-primary" onclick="cropper_campaign_{{$key}}.setAspectRatio(1/1);">
<input type="radio" class="sr-only" id="aspectRatio2" name="aspectRatio" value="1">
<span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: 1 / 1">
1:1
</span>
</button>
<button class="btn btn-primary" onclick="cropper_campaign_{{$key}}.setAspectRatio(2/3);">
<input type="radio" class="sr-only" id="aspectRatio3" name="aspectRatio" value="0.6666666666666666">
<span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: 2 / 3">
2:3
</span>
</button>
<button class="btn btn-primary" onclick="cropper_campaign_{{$key}}.setAspectRatio(NaN);">
<input type="radio" class="sr-only" id="aspectRatio4" name="aspectRatio" value="NaN">
<span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: NaN">
Free
</span>
</button>
</div>
</div>
</div>
{{-- <div class="row">
<img id="preview_{{$key}}" style="width: 256px; height: 144px;">
</div> --}}
</div>
<div class="modal-footer">
<button type="button" id="crop_button2" class="crop-button btn btn-default"> Crop </button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
@endforeach
</div>
</div>
</span>
Here is my controller:
public function edit($id)
{
$model = Models::with('model_media')->findOrFail($id);
$data['allMedia'] = ModelMedia::where([["model_id", "=", $id]])->orderBy('sort')->get();
$data['model_image'] = ModelMedia::where([["type", "=", 1],["tag", "=", 1],["model_id", "=", $id]])->orderBy('sort')->get();
$data['model_campaign'] = ModelMedia::where([["type", "=", 1],["tag", "=", 2],["model_id", "=", $id]])->orderBy('sort')->get();
$data['model_show'] = ModelMedia::where([["type", "=", 1],["tag", "=", 3],["model_id", "=", $id]])->orderBy('sort')->get();
$data['model_video'] = ModelMedia::where([["type", "=", 2],["tag", "=", 1],["model_id", "=", $id]])->orderBy('sort')->get();
$data['video_campaign'] = ModelMedia::where([["type", "=", 2],["tag", "=", 2],["model_id", "=", $id]])->orderBy('sort')->get();
$data['video_show'] = ModelMedia::where([["type", "=", 2],["tag", "=", 3],["model_id", "=", $id]])->get();
// $data['model_gif'] = ModelMedia::where([["type", "=", 3],["tag", "=", 1],["model_id", "=", $id]])->get();
$data['model_gif'] = ModelMedia::where([["type", "=", 3],["model_id", "=", $id]])->orderBy('sort')->get();
// $data['gif_campaign'] = ModelMedia::where([["type", "=", 3],["tag", "=", 2],["model_id", "=", $id]])->get();
// $data['gif_show'] = ModelMedia::where([["type", "=", 3],["tag", "=", 3],["model_id", "=", $id]])->get();
// echo "<pre>";
// print_r($data);die;
$data['categories'] = Category::where('category','=',$model->category)->get();
$data['badges_detail'] = Badges::get();
$data['model'] = $model;
$data['breadcrumbs'] = "Model";
$data['page_header'] = "Model";
$data['title'] = "Model";
$data['menu'] = "Model";
return view('model/edit_model',$data);
}
Do you know what's the problem in my code? Or maybe is from controller? Because is strange that when I upload only one image is working fine, but when I upload 2 images, the order is broken.
Level 122
You ask for images to be ordered by 'sort' are they? Is it the sort column on the database that is going wrong?
Level 1
Seems like every new photo has 1 at sort column ? https://imgur.com/a/n4WoFCJ
Level 1
So, when I upload images, the id from sort ( column ) is 1 for every photo, but when I make sort ( function ), the id is counted based on my sort, like 0, 1 ,2 ,3 ,4 etc. BUT, when I upload another photo, the photo has same id 1 in sort ( column ), and the sort will be 0, 1, The new photo with id 1, 2, 3, 4 etc...
Please or to participate in this conversation.