Develop Reference

Dropzone Multiple File upload not working For Excel File

I have facing a problem in Dropzone and Laravel 5.7. I am currently upload excel file to via dropzone. But it is not working correctly. For example If I add 10 files then In my database there is 10 entry with different file name but On file Storage folder there are not 10 files, It varies from 6,7,8 File. I am changing my php.ini file for upload_max_filesize and max_file_uploads. Here is my code snippet.
My Js Code
<script type="text/javascript">
Dropzone.options.dropzone =
{
parallelUploads: 1, // Uploads one (1) file at a time, change to whatever you like.
autoProcessQueue: true,
uploadMultiple: true,
maxFiles: 100,
maxFilesize: 3,
autoQueue: true,
renameFile: function (file) {
var dt = new Date();
var time = dt.getTime();
return time + file.name;
},
addRemoveLinks: true,
timeout: 50000,
removedfile: function (file)
{
var name = file.upload.filename;
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
},
type: 'POST',
url: '{{ url("admin.pos.deleteexcel") }}',
data: {filename: name},
success: function (data) {
console.log("File has been successfully removed!!");
},
error: function (e) {
console.log(e);
}});
var fileRef;
return (fileRef = file.previewElement) != null ?
fileRef.parentNode.removeChild(file.previewElement) : void 0;
},
success: function (file, response)
{
console.log(response);
},
error: function (file, response)
{
return false;
}
};
</script>
My Form is
{!! Form::open(['method'=>'POST', 'action'=>'backend\ExcelController#multipleExcelStore', 'files'=>true, 'id' => 'dropzone_form', 'class'=>'dropzone needsclick dz-clickable']) !!}
<div class="dz-message needsclick">
<div class="search-block">
<div class="row">
<div class="col-xs-12">
<div class="upload_container">
<div class="upbtn_block_1">
Drag & drop Files Here
</div><!--/upbtn_block_1 -->
<div class="up_text_block">Or</div>
<div class="upload_btn"><span>Browse File</span></div>
</div>
</div>
</div>
</div>
</div>
{!! Form::close() !!}
And My controller code
public function multipleExcelStore(Request $request) {
$input = [];
$imageName = Carbon::now()->format('Y') . '/' . Carbon::now()->format('m') . '/' . uniqid() . '_' . time() . '.' . $request->file('file')->getClientOriginalExtension();
$destinationPath = Config::get('constants.PO_MULTILE_ATTACHEMNT') . '/';
Helper::uploadFile($request->file('file'), null, $destinationPath, $imageName);
$input['attachment'] = Config::get('constants.PO_MULTILE_ATTACHEMNT') . '/' . $imageName;
$input['process_user_id'] = Auth::guard('admin')->user()->id;
$input['process_ip'] = $request->ip();
$input['name'] = $request->file('file')->getClientOriginalName();
PosExcel::create($input);
return response()->json(['success' => $imageName]);
}
I google it but return without any success.
Thank You

Have you tryed to remove
autoProcessQueue: true,
uploadMultiple: true,
I have another project with multiple upload and dont need to use that argument in the javascript, Queue is possible that is the problem too, try it and tell us :)
good luck

how to add cloudinary parameters to upload plugin in Trumbowyg

I am using the trumbowyg editor in my project. From the documentation, I know that I can use the following code to set the image upload content of the editor.
$('#editor')
.trumbowyg({
btns: ['upload'],
plugins: {
// Add imagur parameters to upload plugin for demo purposes
upload: {
serverPath: 'https://api.imgur.com/3/image',
fileFieldName: 'image',
headers: {
'Authorization': 'Client-ID xxxxxxxxxxxx'
},
urlPropertyName: 'data.link'
}
}
});
this works fine with imgur but I want to use cloudinary server instead of imgur.
could anyone please guide what I have to do with plugins:{} when using cloudinary?
also I'm using dropzone.js with cloudinary to upload image and this is also working properly.
here is dropzone function code:
Dropzone.autoDiscover = true;
var myDropzone = new Dropzone(document.getElementById('image-upload'), {
clickable: "#image-upload #btn-add",
uploadMultiple: false,
autoProcessQueue: true,
acceptedFiles:'.jpg,.png,.jpeg,.gif',
parallelUploads: 10,
maxFilesize: 9,
maxFiles: 10,
url: 'https://api.cloudinary.com/v1_1/demo_project/image/upload',
addedfile: function(file) {
// console.log(file);
new Noty({
type: 'success',
text: "Uploading...",
timeout: false
}).show();
// myDropzone.processQueue();
},
success: function(file, response){
new Noty({
type: 'success',
text: "Uploaded!",
killer: true
}).show();
newImageArray.push({
public_id: response.public_id,
url: response.url,
secure_url: response.secure_url
});
newImageArrayJSON = JSON.stringify(newImageArray);
$imageStorage.val(newImageArrayJSON)
$("#image-upload .image").html('<img src="' + response.secure_url + '">')
$("#image-upload #btn-add").hide();
$("#image-upload #btn-remove").show();
}
});
myDropzone.on('sending', function (file, xhr, formData) {
formData.append('api_key', 112233445566778);
formData.append('timestamp', Date.now() / 1000 | 0);
formData.append('upload_preset', 'mypreset');
});
Thanks in advance!

I would advise starting with the following basic implementation which I tested and worked for me:
$('#editor').trumbowyg({
btns: ['upload'],
plugins: {
upload: {
serverPath: 'https://api.cloudinary.com/v1_1/demo_project/image/upload',
fileFieldName: 'file',
urlPropertyName: 'data.secure_url',
data: [
{name: 'api_key', value: '112233445566778'},
{name: 'timestamp', value: Date.now() / 1000 | 0},
{name: 'upload_preset', value: 'mypreset'}
],
success: function (data) {
console.log(data);
},
error: function (error) {
console.log(error.responseText);
}
}
}
});
You can log in to your Cloudinary account and modify your upload preset to restrict uploads based on different conditions, the same as you do with dropzone.js, for example to only allow uploads of specific formats etc.

Dropzone disable upload

I wanna know how to disabled upload if i have 1 file has uploaded. But if i remove file, the ddropzone been enabled to upload.
here's my code on js:
Dropzone.options.attachmenacc = {
maxFiles: 1,
accept: function(file, done) {
},
init: function() {
this.on("maxfilesexceeded", function(file){
alert("No more files please!");
});
},
addRemoveLinks: true,
removedfile: function(file) {
var name = file.name;
$.ajax({
type: 'POST',
url: host+'upload/bank/unfile',
data: "id="+name,
dataType: 'html'
});
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
//console.log();
},
}
Well on my code now, if i add upload file more, it show alert, and these file (expected first file) wont uploaded, but it still show that file was uploaded.

Summernote image upload not working

I am having a problem with summernote Image Upload.
My script looks some what like this:
<script>
$(document).ready(function() {
var IMAGE_PATH = 'http://localhost/dist/images/';
$('.summernote').summernote({
height: 300,
callbacks : {
onImageUpload: function(image) {
uploadImage(image[0]);
}
}
});
function uploadImage(image) {
var data = new FormData();
data.append("image",image);
$.ajax ({
data: data,
type: "POST",
url: "uploader.php",
cache: false,
contentType: false,
processData: false,
success: function(url) {
var image = IMAGE_PATH + url;
$('.summernote').summernote('insertImage', image);
},
error: function(data) {
console.log(data);
}
});
}
});
</script>
and uploader.php has following codes:
<?php
$image = $_FILES['image']['name'];
$uploaddir = 'images/';
$uploadfile = $uploaddir . basename($image);
if( move_uploaded_file($_FILES['image']['tmp_name'],$uploadfile)) {
echo $uploadfile;
} else {
echo "Unable to Upload";
}
?>
Image files are uploading successfully to the dir 'images'.
But $('.summernote').summernote('insertImage', image); doesn't append the uploaded Image Link to the editor.
What am i missing ? And yes, i tried alerting the var 'image' and it has the required value.

Use the code below. It should work perfectly
PHP Script
<?php
// include Database connection file
require_once("../../resources/directories.inc.php");
if (isset($_FILES['file']['name'])) {
if (!$_FILES['file']['error']) {
$name = rand(100,1000).'_'.date('Ymd');
$ext = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
$filename = $name.'.'.$ext;
$destination = '../../uploads/news/'.$filename; //change this directory
$location = $_FILES["file"]["tmp_name"];
move_uploaded_file($location, $destination);
echo BASE_URL.'uploads/news/'.$filename;
} else {
echo 'Ooops! Your upload triggered the following error: '.$_FILES['file']['error'];
}
}
?>
JS CODE
$('.summernote_editor').summernote({
tabsize: 2,
height: 400,
spellCheck: true,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'italic', 'superscript', 'subscript', 'clear']],
['fontname', ['fontname','fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'help', 'undo', 'redo']],
],
callbacks: {
onImageUpload: function(files, editor, welEditable) {
sendFile(files[0], editor, welEditable);
}
}
});
function sendFile(file, editor, welEditable) {
var lib_url = '<?php echo BASE_URL."resources/library/upload_summernote.lib.php"; ?>';
data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: "POST",
url: lib_url,
cache: false,
processData: false,
contentType: false,
success: function(url) {
var image = $('<img>').attr('src', url);
$('.summernote_editor').summernote("insertNode", image[0]);
}
});
}

you can try :var IMAGE_PATH = 'http://localhost/dist/';
because your php codes :$uploadfile=>'images/xxx.jpg', the html url use the twice images,like ../images/images/xxx.jpg. so summernote image upload not working!
thanks!
it's my codes
<script>
$(document).ready(function() {
var IMAGE_PATH = 'http://localhost:81/summernote-develop/examples/';
$('.summernote').summernote({
height: 300,
callbacks : {
onImageUpload: function(image) {
uploadImage(image[0]);
}
}
});
function uploadImage(image) {
var data = new FormData();
data.append("image",image);
$.ajax ({
data: data,
type: "POST",
url: "uploader.php",
cache: false,
contentType: false,
processData: false,
success: function(url) {
var image = IMAGE_PATH + url;
$('.summernote').summernote('insertImage', image);
//console.log(image);
},
error: function(data) {
console.log(data);
}
});
}
});
</script>
the php codes as same as you.
and codes dir:D:\WWW\summernote-develop\examples\
images dir:D:\WWW\summernote-develop\examples\images

Delete script for Dropzone.js and PHP not working

I am using dropzone for file upload. I want to delete the files on the server when the removeLink is clicked. For that I use Ajax which opens the .php site. But somehow I can't pass the filename of the file which should be deleted (the delete_image.php works). How can I pass the filename so it can be deleted?
addRemoveLinks: true,
removedfile: function(file) {
$.ajax({
type: 'POST',
url: 'delete_image.php',
data: {name: +file, dir: "<? echo $_GET['id']; ?>"},
});
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
}
Credit: code from this site

Most simple way
JS file,this script will run when you click delete button
this.on("removedfile", function(file) {
alert(file.name);
$.ajax({
url: "uploads/delete.php",
type: "POST",
data: { 'name': file.name}
});
});
php file "delete.php"
<?php
$t= $_POST['name'];
echo $t;
unlink($t);
?>