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]);
}
}
Related
First of all, I am not good at English. I am sorry
When I save the pdf file as an attachment using jspdf, can I save only 3 sheets from the beginning?
I can't find an example of saving only a specific page, so I'm asking you a question
My guess is that when you press the registration button, you can save it as 3 sheets only if the extension of the attachment is pdf
My guess ->
Register after user adds attachment form submit
If the storage extension is pdf in the saved api,
2-1. Read jsPDF and bring only the first 3 pages to make a new pdf
2-2. Save only 3 pages
function fnInsert(){
if($("#title").val() === ''){
alert("Please enter a title.");
return false;
}
var ext = $('[name=upload_0]').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['pdf']) == -1) {
/* When pdf, read jsPDf and bring only the first 3 pages to create a new pdf */
}
/* Save to 3-page pdf DB */
$("#aform").attr({action:"/cms/data/insertDataMgt.do", method:'post'}).submit();
}
I don't know what to do with the annotated part
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.
Is it possible to pack analytics code within an image and have that code fire when the image is loaded on a webpage?
The image would be inserted onto a page through a file upload form field such as if I were to add an image to this question where I have no direct access to add HTML or JS to the page.
Goal being to track page views on pages which I have no access to any code, only the ability to upload an image.
Almost kind of like a 'Trojan horse' approach but without any malicious intent.
Tracking pixels requires specific structure and specific server.
So I cannot imagine anything like Trojan horse, but you can track image load as an event.
Try something like this:
Single purpose client side
<img src="" alt="Facebook is new god" id="fblogo"/>
<script type="text/javascript">
window.onload = function () {
var logo = document.getElementById('fblogo');
logo.onload = function () {
ga('send', 'event', 'FB', 'Loaded');
};
logo.src = 'https://facebook.com/fb/logo.png';
};
</script>
Measurement protocol way - server side
https://www.google-analytics.com/collect
?v=1 // Protokol version
&tid=UA-XXXX-Y // Property ID
&cid=55568765456 // Client ID stored in database or random number
&dh=forum.eu // referrer
&dp=image78974.png // filename
&t=event // send instruction
&ni=1 // non inteaction flag
&ec=Image // Event Category
&ea=Load // Event Action
&el=image78974.png // Event Label
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" });
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.