Hello, please I'd like to upload multiple images on real time ( display and remove desired ones). That's why I used that tutorial 's code: https://bootsnipp.com/snippets/2eNKz
My problem is how can I store just diplayed images before submitting my form to send it in the controller's request. Because my $inputs['pro-image'] parameter contains just last selected files. Please I need help so to manually edit the value of the file input. See answer below: you can access/modify the input value with $('#files').val() (if using JQuery). Then it's basically a text value you can modify -> ie identify/remove duplicates, remove unwanted entries, etc...
My view's code is below:
@extends('layouts.layout')
@section('contenu')
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
@if (Session::has('message'))
<div class="alert alert-info">{{ Session::get('message') }}</div>
@endif
<div align="right">
<a href="admin/applications/versions/{{$vers->id}}/modules" class="btn btn-info btn-sm"> Retour </a>
</div>
</div>
<div class="body">
{!!Form::open(['route' => ['admin.applications.versions.modules.storeM', $vers->id ], 'method' => 'post', 'enctype' => "multipart/form-data", 'files'=> true])!!}
<input type="hidden" name="_token" value="{{ csrf_token() }}">
{{ csrf_field() }}
@if (count($errors) > 0)
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<div class="form-group" id="cheq">
<div class="row clearfix">
<div class="col-sm-4">
<label>Module </label>
</div>
<div class="col-sm-6">
<select class="form-control " name="mod" id="mod">
<option value=null> -- Sélectionnez un module modifié dans cette version d'application SVP -- </option>
@foreach($modules as $mod)
<option value="{{$mod->id}}"> {{$mod->intitule}} </option>
@endforeach
</select>
</div>
<div class="col-sm-2">
<input type="checkbox" class="filled-in" id="ig_checkbox" >
<label for="ig_checkbox">Ou autre</label>
</div>
</div>
</div>
<div class="form-group" id="int">
<div class="row clearfix">
<div class="col-sm-4">
<label>Intitulé du module </label>
</div>
<div class="col-sm-8">
<input type="text" name="intitule" id="intitule" class="form-control" Placeholder="Intitulé du module" />
</div>
</div>
</div>
<div class="form-group" id="obj">
<div class="row clearfix">
<div class="col-sm-4">
<label>Objectif du module </label>
</div>
<div class="col-sm-8">
<textarea rows="3" name="objectif" id="objectif" class="form-control" Placeholder="Objectif du module" ></textarea>
</div>
</div>
</div>
<div class="form-group" id="desc">
<div class="row clearfix">
<div class="col-sm-4">
<label>Description du module </label>
</div>
<div class="col-sm-8">
<textarea rows="7" name="description" id="description" class="form-control" Placeholder="Description du module" ></textarea>
</div>
</div>
</div>
<div class="form-group" >
<div class="row clearfix">
<div class="col-sm-4">
<label>Version en cours </label>
</div>
<div class="col-sm-8">
<input type="text" name="version" id="version" class="form-control" Placeholder="Version en cours" value="{{$vers->numero}}" disabled/>
</div>
</div>
</div>
<div class="form-group">
<div class="row clearfix">
<div class="col-sm-4">
<label>Date de validation de version module</label>
</div>
<div class="col-sm-8">
<div class="input-group">
<input type='text' class="form-control" id='datepicker1' name="dateM">
<div class="input-group-addon" style="background-color:gainsboro">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
</div>
</div>
<div class="form-group" id="desc">
<div class="row clearfix">
<div class="col-sm-4">
<label>Description de la version actuelle du module </label>
</div>
<div class="col-sm-8">
<textarea rows="7" name="description1" id="description1" class="form-control" Placeholder="Description des modifications réalisées pour cette version du module" ></textarea>
</div>
</div>
</div>
<a href="javascript:void(0)" onclick="$('#pro-image').click()">Télécharger les interfces de votre module</a>
<input type="file" id="pro-image" name="pro-image[]" style="display: none;" class="form-control" multiple>
</fieldset>
<div class="preview-images-zone" id="preview-imgs">
</div>
<!-- <input type="file" id="pro" name="pro[]"class="form-control" multiple> -->
<input type="hidden" id="added" name="added[]" />
<input type="hidden" id="deleted" name="deleted[]" />
<div class="modal-footer">
<input type="submit" name="action" id="action" value="Ajouter" class="btn btn-info" />
</div>
{!!Form::close()!!}
</div>
</div>
</div>
</div>
<!-- #END# Exportable Table -->
@stop
@section('script_code')
<script type="text/javascript">
$(document).ready(function() {
$("#int").hide();
$("#obj").hide();
$("#desc").hide();
$("#cheq").change(function(){
if ($("#ig_checkbox").is(':checked'))
{
$("#mod").prop('disabled', 'disabled');
document.getElementById('mod').selectedIndex=0;
$("#int").show();
$("#obj").show();
$("#desc").show();
}
else{
$("#mod").prop('disabled', false);
$("#int").hide();
$("#obj").hide();
$("#desc").hide();
}
})
});
</script>
<script type="text/javascript">
var deleted = '';
var y = new Array();
var x = new Array();
var added = '';
$(document).ready(function() {
var num1 = 0;
document.getElementById('pro-image').addEventListener('change', readImage, false);
$( ".preview-images-zone" ).sortable();
$(document).on('click', '.image-cancel', function() {
let no = $(this).data('no');
deleted = document.getElementById('pro-img-'.no);
// dd = deleted.src;
console.log('deleted');
console.log(deleted);
// deleted = deleted.src;
// console.log(deleted);
$(".preview-image.preview-show-"+no).remove();
x[num1] = new Image();
x[num1].src = deleted;
console.log(num1);
console.log(x);
//x.push(deleted);
num1 = num1 +1;
});
});
$("#deleted").val(x);
var num = 1;
function readImage() {
if (window.File && window.FileList && window.FileReader) {
var files = event.target.files; //FileList object
var output = $(".preview-images-zone");
for (let i = 0; i < files.length; i++) {
var file = files[i];
if (!file.type.match('image')) continue;
var picReader = new FileReader();
picReader.addEventListener('load', function (event) {
var picFile = event.target;
var html = '<div class="preview-image preview-show-' + num + '">' +
'<div class="image-cancel" data-no="' + num + '">x</div>' +
'<div class="image-zone"><img class="opa" id="pro-img-' + num + '" src="' + picFile.result + '" title="interface ' + num + '"></div>' +
'</div>';
output.append(html);
//added = picFile;
added = picFile.result;
y[num-1] = new Image();
y[num-1] = added;
console.log(y);
num = num + 1;
});
picReader.readAsDataURL(file);
}
// $("#pro-image").val('');
} else {
console.log('Browser not support');
}
var t= document.getElementById('added');
t.value = JSON.stringify(y);
console.log(t.value);
}
</script>
@stop
My controller 's code is just to display inputs and try knowing images stored :
public function storeM(Request $request, $id)
{
$inputs = $request->all();
// $inputs['added'] = json_parse($inputs['added']);
echo '<pre>';
print_r($inputs);
var_dump($_POST["pro-image"]);
exit();
}
Please I need help, thanks for your time.
Please I'm still waiting for solution having I stored all desired images in a ultidimensional array (javascript) I can't send it to my controller to update them the array while I use print_r() is displayed like that: [added] => Array ( [0] => [object File],1,[object File],3 )
Someone have the solution please. Thanks a lot
The solution is obtaned by sending the img.src of all files in request.
Please or to participate in this conversation.