Multiple image upload
Please help me for this---> i have multiple image upload while uploading process i showing progress bar. once progress bar completed . still image uploading process going on. if the user click submit its get another page and showing image count low. if i upload 10 its shows 5, 6 something. how to solve this. here is my controller:
if(isset($files)){
$list_id = (isset($data['list']) && $data['list'] != '') ? $data['list'] :'';
foreach($files as $file) {
$tmp = array();
$arr = array();
$rules = array('file' => 'required'); //'required|mimes:png,gif,jpeg,txt,pdf,doc'
$validator = Validator::make(array('file'=> $file), $rules);
if($validator->passes()){
$name = hash('sha256', microtime()).'.jpg';
$destinationPath = 'store';
$pathname = 'http://static.realy.in/'.$name;
$upload_success = $file->move($destinationPath, $name);
$image = DB::table('image')->insertGetId(['fld'=>$type,'owner'=>NULL,'userid'=>NULL,'file'=>$pathname,'thumb'=>$pathname,'small'=>$pathname]);
$upd_cmd = "/usr/local/bin/gsutil cp /home/XXX-XXX/mnt/".$name." gs://static.XXX.in";
$output = shell_exec($upd_cmd);
if(Request::is('api/listingImgUpload') || !empty($list_id)){
if($list_id != '') {
$data['list'] = $list_id;
}
$list_img = DB::table('listing_image')->insertGetId(['listing' => $list_id, 'image' => $image]);
}
$tmp['pathname'] = $pathname;
$tmp['img_ids'] = $image;
array_push($result,$tmp);
$arr = array('pathname'=>$pathname, 'id'=>$image);
unlink('/home/SSSS/mnt/'.$name);
}
}
}
JS file script: var maxFiles = 20; var percent = 100; $('#fileupload').fileupload({ url: '/upload-image1', type: "POST", dataType: 'json', autoUpload: true, acceptFileTypes: /(.|/)(gif|jpe?g|png)$/i, maxFileSize: 5000000, // Enable image resizing, except for Android and Opera, // which actually support image resizing, but fail to // send Blob objects via XHR requests: disableImageResize: /Android(?!.*Chrome)|Opera/ .test(window.navigator.userAgent), previewCrop: true, formData: {list: true}, }).on('fileuploadadd', function (e, data) { if(counter < maxFiles){ counter++; $('.cnt').html(counter); } else { alert('Oops! It looks this property reached the images limit. Maximum allowed 20 images per property.'); return false; } data.context = $('').addClass('col-md-3').addClass('prop_img').appendTo('#files'); $.each(data.files, function (index, file) { var node = $('').addClass('prop_img_inner'); if (!index) { node.append(uploadButton.clone(true).data(data)); } node.appendTo(data.context); }); }).on('fileuploadprocessalways', function (e, data) { var index = data.index, file = data.files[index], node = $(data.context.children()[index]); if (file.preview) { node.prepend(file.preview); } if (file.error) { node.append($('').text(file.error)); } if (index + 1 === data.files.length) { data.context.find('button') .text('X') .prop('disabled', !!data.files.error); } }).on('fileuploadprogressall', function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $('#progress').show(); $('#progress .progress-bar').css( 'width', progress + '%' ); if (progress === percent) { $('#progress').hide(); } }).on('fileuploaddone', function (e, data) { var response = data.result; console.log(response); var path = response.pathname; var ids = response.id; var list = response.listing; data.context.find('button') .attr('data-target',path) .attr('data-id',ids) .attr('id','remove_img'+ids); var imgid = $('#img_list').val(); if(imgid != ""){ $('#img_list').val(imgid + ',' +ids); } else{ $('#img_list').val(ids); } $.each(data.result.files, function (index, file) { if (file.url) { var link = $('') .attr('target', '_blank') .prop('href', file.url); $(data.context.children()[index]) .wrap(link); } else if (file.error) { var error = $('').text(file.error); $(data.context.children()[index]) .append(error); } });
}).on('fileuploadfail', function (e, data) {
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
Please or to participate in this conversation.