I have a question regarding direct-image-upload from Cloudinary. I could set this up in a rails app using simple-form and <% = f.cl_image_upload (: file)%> but after I select the file, it start uploading. I don't like this approach and I want that upload start just after commit the form. Is it possible? I worry about having file in Cloudinary server which does not have a corresponding id in my database.
The default implementation indeed automatically uploads a file once selected. Most users don't bother with deleting accidentally uploaded images as they don't take a lot of extra storage. However, if you wish not to upload the image automatically on selection, you can set the autoUpload to false in the fileupload call. For example:
$(document).ready(function() {
$('.cloudinary-fileupload').fileupload({
autoUpload: false
});
});
I think you can help me, Actually, I have this script...
<script>
$(document).ready(function() {
// Cloudinary jQuery integration library uses jQuery File Upload widget
// (see http://blueimp.github.io/jQuery-File-Upload/).
// Any file input field with cloudinary-fileupload class is automatically
// wrapped using the File Upload widget and configured for Cloudinary uploads.
// You can further customize the configuration using .fileupload method
// as we do below.
$(".cloudinary-fileupload")
.fileupload({
// Uncomment the following lines to enable client side image resizing and valiation.
// Make sure cloudinary/processing is included the js file
disableImageMetaDataLoad: true,
disableImageResize: false,
imageMaxWidth: 800,
imageMaxHeight: 800,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png|bmp|ico)$/i,
maxFileSize: 20000000, // 20MB
dropZone: "#direct_upload",
start: function (e) {
$(".status").text("Starting upload...");
},
progress: function (e, data) {
$(".status").text("Uploading... " + Math.round((data.loaded * 100.0) / data.total) + "%");
},
fail: function (e, data) {
$(".status").text("Upload failed");
}
})
.off("cloudinarydone").on("cloudinarydone", function (e, data) {
$(".status").text("");
$(".preview").html(
$.cloudinary.image(data.result.public_id, {
format: data.result.format, width: 150, height: 100, crop: "limit"
})
);
});
});
</script>
I'm beginning with javascript. This script above is working fine, but it just show me the preview after upload it. I don't like this approach because, if user change the preview image, I will have one file upload to Cloudinary without relative register in my db. Will be great if is possible show the preview and just upload after the user press submit in the form.
Note: I hope you understand me, I'm from Brazil and I don't write in english very well.
Related
I know this is a very old issue but honestly I did not find a single complete piece of code for dropzonejs which is working as described.
I am trying to implement dropzonejs for file uploading. What I need is upload file to the server when it is dragged, and remove the file from the server when Remove file url is clicked.
I saw many solutions, for me, uploading just works fine. But when I try to implement the remove, I found no sample.
for the upload process, I configured my dropzone like below:
Dropzone.options.dropzoneForm = {
addRemoveLinks: true,
init: function() {
//upload process
}
};
It shows the addRemoveLink like "Remove file" just under the uploaded file.
I have seen someone to use another property like
Dropzone.options.dropzoneForm = {
addRemoveLinks: true,
removedFiles: function() {
//remove process
}
};
I am not sure how to implement this. Should I implement this like below? :
Dropzone.options.dropzoneForm = {
addRemoveLinks: true,
init: function(){
//upload process
}
removedFiles: function() {
//remove process
}
};
Please NB. I am expecting a full working example with server side upload and file delete.
Hey I have added jsPdf into my HTML to download the HTML as a PDF, but in IE 9 it doesn't works. It is not downloading any PDF so I searched about this and got the I have to enable the IE shim for this so can you help me out that how I can be able to do that, I have tried to use Downloadify but didn't understand how to pass full HTML file and get the image of that into PDF.
These are the steps, but the support for downloadify is poor.
Add these script tags to the top of your page (changing the path as appropriate to the files in the lib directory of jspdf):
<script src="./js/jspdf/libs/Downloadify/js/downloadify.min.js"></script>
<script src="./js/jspdf/libs/Downloadify/js/swfobject.js"></script>
add a <div id="downloadify"> in your dom. This div should be empty.
Next, add a script tag to the bottom of your page that will run after the DOM has been populated. This script will generate a button in the '#downloadify' div. Put this inside of the script tag:
Downloadify.create('downloadify',{ // this first argument id a dom element id. this is how it knows where to populate the flash button it's creating.
filename: "afilename.pdf",
data: function(){
// generate your pdf here.
var pdf = new jsPDF;
// various other jspdf commands here
return pdf.output();
},
onComplete: function(){
alert('Your File Has Been Saved!');
},
onCancel: function(){
alert('You have cancelled the saving of this file.');
},
onError: function(){
alert('You must put something in the File Contents or there will be nothing to save!');
},
swf: './js/jspdf/libs/Downloadify/media/downloadify.swf', // make sure this links properly to your file as well.
downloadImage: './js/jspdf/libs/Downloadify/images/download.png', // this is the link to the image of the button itself. An ugly default is included. If you want to style the button, you have to create a sprite image of the same kind.
width: 100, // width of the button
height: 30, // 1/4 height of the button image (which has four states present)
transparent: true, // seems to do nothing, set to true or false.
append: false // have not figured out what this does.
});
I successfully created a form for User model where i can upload image with carrier wave. This works nicely with submit button.
Everything is fine but i want to improve that with jquery file upload or something similar. So my imagination is i will click on file_upload button then select the file and after that it will preview the thumb of image.
I tried to follow railcast #381 but when i upload image, the preview will appear after refresh of page. Is it better to use js response or json? Is there a better way for ajax image upload? Thanks for advices
See the Attached : Then use the following code.
Clicking on the "Upload different file" will trigger the hidden file uploader.
$('#page3-upload-bg-picture-link').click(function(){
$("#page3-upload-bg-picture").trigger("click");
});
Then if you upload a file, it will call the change funcution.
$("#page3-upload-bg-picture").change(function(){
page3BgImage(this);
});
Then the page3BgImage is going to be called. Here, the image is read from the location and show in my image's "You Uploaded Image" div.
function page3BgImage(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#page3-preview-bg-image').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
I have a Ruby on Rails application with normally integrated TinyMCE (JS not the gem used)
Now I want to integrate a filemanager, which one can I use for this? Upload is not required, I only want to browse trough my picture galary.
Written my own File Manager.
To access the Filemanager from TinyMCE you need to set up the button correctly
in TinyMCE options you have to add this:
file_browser_callback: function (field_name, url, type, win) {
tinymce.activeEditor.windowManager.open({
title: "My file browser",
url: "/uploads/filechooser/",
width: 850,
height: 600
}, {
oninsert: function (url) {
win.document.getElementById(field_name).value = url;
}
});
}
in URL you have to specify the path to your own filechooser.
and in filechooser you need this:
$(".filechooser").click(function () {
top.tinymce.activeEditor.windowManager.getParams().oninsert($(this).parent().prev().val());
top.tinymce.activeEditor.windowManager.close();
});
to return the selected image or file back to TinyMCE
I am using highcharts and Ruby on Rails to creating chart. I want to save graph as server automatically. Following code download image automatically on download folder with name as chart.png
events: {
load: function () {
var ch = this;
setTimeout(function(){
ch.exportChart();
});
}
}
I want to save grph as /asset/image folder with name today_Report.png
I don't think you can force user to save anything in folder you want to. That's about path, now about name for file, check this, example:
chart.exportChart({ "filename": "today_Report" });