Rails: field_tag with javascript to preview files not working correctly
0
I have a file_field_tag inside a rails form with a select file field:
<%= file_field_tag "attachments[media_files]", multiple: true, id: "files" %>
And I have an area to preview the images/videos and remove if need be:
<span id="result"></span>
Everything is working correct but there is only one glitch.... If the images/videos are in separate folders, I have to add the files from one folder first and then from the other folder. But after this process only the second batch of files gets saved.
Here is the javascript for all of the above:
window.onload = function(){
//Check File API support
if(window.File && window.FileList && window.FileReader)
{
var filesInput = document.getElementById("files");
filesInput.addEventListener("change", function(event){
var files = event.target.files; //FileList object
var output = document.getElementById("result");
for(var i = 0; i< files.length; i++)
{
var file = files[i];
//Allowed files
//if (!file.type.match(/.(jpg|jpeg|png|gif|mp4|avi|flv|wmv|mov|tiff|bmp|exif)$/i))
//continue;
var picReader = new FileReader();
picReader.addEventListener("load",function(event){
var picFile = event.target;
var span = document.createElement("span");
span.innerHTML = ['<img class="thumb" src="', picFile.result, '" title="', picFile.name, '"/><span class="remove_img_preview"></span>'].join('');
output.insertBefore(span,null);
span.children[1].addEventListener("click", function(event){
span.parentNode.removeChild(span);
});
});
//Read the image
picReader.readAsDataURL(file);
}
});
}
else
{
console.log("Your browser does not support File API");
alert("Your browser does not support File API")
}
}
Any ideas on how to fix this glitch??
javascript ruby-on-rails
asked Nov 14 '18 at 12:25
DevDev
16511
add a comment |
0
I have a file_field_tag inside a rails form with a select file field:
<%= file_field_tag "attachments[media_files]", multiple: true, id: "files" %>
And I have an area to preview the images/videos and remove if need be:
<span id="result"></span>
Everything is working correct but there is only one glitch.... If the images/videos are in separate folders, I have to add the files from one folder first and then from the other folder. But after this process only the second batch of files gets saved.
Here is the javascript for all of the above:
window.onload = function(){
//Check File API support
if(window.File && window.FileList && window.FileReader)
{
var filesInput = document.getElementById("files");
filesInput.addEventListener("change", function(event){
var files = event.target.files; //FileList object
var output = document.getElementById("result");
for(var i = 0; i< files.length; i++)
{
var file = files[i];
//Allowed files
//if (!file.type.match(/.(jpg|jpeg|png|gif|mp4|avi|flv|wmv|mov|tiff|bmp|exif)$/i))
//continue;
var picReader = new FileReader();
picReader.addEventListener("load",function(event){
var picFile = event.target;
var span = document.createElement("span");
span.innerHTML = ['<img class="thumb" src="', picFile.result, '" title="', picFile.name, '"/><span class="remove_img_preview"></span>'].join('');
output.insertBefore(span,null);
span.children[1].addEventListener("click", function(event){
span.parentNode.removeChild(span);
});
});
//Read the image
picReader.readAsDataURL(file);
}
});
}
else
{
console.log("Your browser does not support File API");
alert("Your browser does not support File API")
}
}
Any ideas on how to fix this glitch??
javascript ruby-on-rails
asked Nov 14 '18 at 12:25
DevDev
16511
Hello Dev, Here is copy paste code from your question, It looks like your JS function works codepen.io/anon/pen/EOWOPo. Can you please load your code in a browser and check that the file_field_tag has the correct HTML ID (the HTML ID might be "attachments[media_files]")? In most browsers, you can right-click the element and click "Inspect". This will open up dev tools and take you to the element.
– Jon
Nov 14 '18 at 15:48
Thanks for the reply @jon, I checked thefile_field_tagid in a browser and itsid=files
– Dev
Nov 14 '18 at 17:54
add a comment |
0
0
0
I have a file_field_tag inside a rails form with a select file field:
<%= file_field_tag "attachments[media_files]", multiple: true, id: "files" %>
And I have an area to preview the images/videos and remove if need be:
<span id="result"></span>
Everything is working correct but there is only one glitch.... If the images/videos are in separate folders, I have to add the files from one folder first and then from the other folder. But after this process only the second batch of files gets saved.
Here is the javascript for all of the above:
window.onload = function(){
//Check File API support
if(window.File && window.FileList && window.FileReader)
{
var filesInput = document.getElementById("files");
filesInput.addEventListener("change", function(event){
var files = event.target.files; //FileList object
var output = document.getElementById("result");
for(var i = 0; i< files.length; i++)
{
var file = files[i];
//Allowed files
//if (!file.type.match(/.(jpg|jpeg|png|gif|mp4|avi|flv|wmv|mov|tiff|bmp|exif)$/i))
//continue;
var picReader = new FileReader();
picReader.addEventListener("load",function(event){
var picFile = event.target;
var span = document.createElement("span");
span.innerHTML = ['<img class="thumb" src="', picFile.result, '" title="', picFile.name, '"/><span class="remove_img_preview"></span>'].join('');
output.insertBefore(span,null);
span.children[1].addEventListener("click", function(event){
span.parentNode.removeChild(span);
});
});
//Read the image
picReader.readAsDataURL(file);
}
});
}
else
{
console.log("Your browser does not support File API");
alert("Your browser does not support File API")
}
}
Any ideas on how to fix this glitch??
javascript ruby-on-rails
asked Nov 14 '18 at 12:25
DevDev
16511
I have a file_field_tag inside a rails form with a select file field:
<%= file_field_tag "attachments[media_files]", multiple: true, id: "files" %>
And I have an area to preview the images/videos and remove if need be:
<span id="result"></span>
Everything is working correct but there is only one glitch.... If the images/videos are in separate folders, I have to add the files from one folder first and then from the other folder. But after this process only the second batch of files gets saved.
Here is the javascript for all of the above:
window.onload = function(){
//Check File API support
if(window.File && window.FileList && window.FileReader)
{
var filesInput = document.getElementById("files");
filesInput.addEventListener("change", function(event){
var files = event.target.files; //FileList object
var output = document.getElementById("result");
for(var i = 0; i< files.length; i++)
{
var file = files[i];
//Allowed files
//if (!file.type.match(/.(jpg|jpeg|png|gif|mp4|avi|flv|wmv|mov|tiff|bmp|exif)$/i))
//continue;
var picReader = new FileReader();
picReader.addEventListener("load",function(event){
var picFile = event.target;
var span = document.createElement("span");
span.innerHTML = ['<img class="thumb" src="', picFile.result, '" title="', picFile.name, '"/><span class="remove_img_preview"></span>'].join('');
output.insertBefore(span,null);
span.children[1].addEventListener("click", function(event){
span.parentNode.removeChild(span);
});
});
//Read the image
picReader.readAsDataURL(file);
}
});
}
else
{
console.log("Your browser does not support File API");
alert("Your browser does not support File API")
}
}
Any ideas on how to fix this glitch??
javascript ruby-on-rails
javascript ruby-on-rails
asked Nov 14 '18 at 12:25
DevDev
16511
asked Nov 14 '18 at 12:25
DevDev
16511
asked Nov 14 '18 at 12:25
DevDev
16511
asked Nov 14 '18 at 12:25
DevDev
16511
asked Nov 14 '18 at 12:25
DevDev
16511
16511
Hello Dev, Here is copy paste code from your question, It looks like your JS function works codepen.io/anon/pen/EOWOPo. Can you please load your code in a browser and check that the file_field_tag has the correct HTML ID (the HTML ID might be "attachments[media_files]")? In most browsers, you can right-click the element and click "Inspect". This will open up dev tools and take you to the element.
– Jon
Nov 14 '18 at 15:48
Thanks for the reply @jon, I checked thefile_field_tagid in a browser and itsid=files
– Dev
Nov 14 '18 at 17:54
add a comment |
Hello Dev, Here is copy paste code from your question, It looks like your JS function works codepen.io/anon/pen/EOWOPo. Can you please load your code in a browser and check that the file_field_tag has the correct HTML ID (the HTML ID might be "attachments[media_files]")? In most browsers, you can right-click the element and click "Inspect". This will open up dev tools and take you to the element.
– Jon
Nov 14 '18 at 15:48
Thanks for the reply @jon, I checked thefile_field_tagid in a browser and itsid=files
– Dev
Nov 14 '18 at 17:54
Hello Dev, Here is copy paste code from your question, It looks like your JS function works codepen.io/anon/pen/EOWOPo. Can you please load your code in a browser and check that the file_field_tag has the correct HTML ID (the HTML ID might be "attachments[media_files]")? In most browsers, you can right-click the element and click "Inspect". This will open up dev tools and take you to the element.
– Jon
Nov 14 '18 at 15:48
Hello Dev, Here is copy paste code from your question, It looks like your JS function works codepen.io/anon/pen/EOWOPo. Can you please load your code in a browser and check that the file_field_tag has the correct HTML ID (the HTML ID might be "attachments[media_files]")? In most browsers, you can right-click the element and click "Inspect". This will open up dev tools and take you to the element.
– Jon
Nov 14 '18 at 15:48
Thanks for the reply @jon, I checked the
file_field_tag id in a browser and its id=files– Dev
Nov 14 '18 at 17:54
Thanks for the reply @jon, I checked the
file_field_tag id in a browser and its id=files– Dev
Nov 14 '18 at 17:54
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53300217%2frails-field-tag-with-javascript-to-preview-files-not-working-correctly%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53300217%2frails-field-tag-with-javascript-to-preview-files-not-working-correctly%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Hello Dev, Here is copy paste code from your question, It looks like your JS function works codepen.io/anon/pen/EOWOPo. Can you please load your code in a browser and check that the file_field_tag has the correct HTML ID (the HTML ID might be "attachments[media_files]")? In most browsers, you can right-click the element and click "Inspect". This will open up dev tools and take you to the element.
– Jon
Nov 14 '18 at 15:48
Thanks for the reply @jon, I checked the
file_field_tagid in a browser and itsid=files– Dev
Nov 14 '18 at 17:54