Drag and drop file upload not working in Firefox

up vote
-1
down vote

favorite

I am trying to integrate file upload with Browse and drag and drop option in my website. The below code file upload option working good in chrome at the same its not working in Firefox browser. I tried many articles. But I am playing around with this. Anyone help me to resolve this. Thanks in advance.

var imageLoader = document.getElementById('filePhoto');

imageLoader.addEventListener('change', handleImage, false);



function handleImage(e) {

    var reader = new FileReader();

    reader.onload = function(event) {

        $('#uploader img').attr('src', event.target.result);

    }

    reader.readAsDataURL(e.target.files[0]);

    $('#cancel_file').show();

}



var dropbox;

dropbox = document.getElementById("uploader");

dropbox.addEventListener("dragenter", dragenter, false);

dropbox.addEventListener("dragover", dragover, false);

dropbox.addEventListener("drop", drop, false);



function dragenter(e) {

    e.stopPropagation();

    e.preventDefault();

}



function dragover(e) {

    e.stopPropagation();

    e.preventDefault();

}



function drop(e) {

    e.stopPropagation();

    e.preventDefault();

    //you can check e's properties

    //console.log(e);

    var dt = e.dataTransfer;

    var files = dt.files;



    //this code line fires your 'handleImage' function (imageLoader change event)

    imageLoader.files = files;

}

$('#cancel_file').click(function(e) {

    $('.fimg').attr('src', "https://i.imgur.com/j0KblIu.png");

    $('#cancel_file').hide();

});

#uploader {

  position: relative;

  overflow: hidden;

  width: 300px;

  height: 350px;

  background: transparent;

  border: 2px dashed #e8e8e8;

  cursor: pointer;

  padding: 5px;

  color: #555;

  font-family: 'Segoe UI';

  font-weight: bold;

} 

#uploader p {

  padding: 30px;

  text-align: center;

  position: relative;

  font-size: 25px;

  color: #000;

  top: 56px;

}	

#filePhoto {

  display: none;

}    

#uploader img {

  position: absolute;

  width: 100%;

  height: 362px;

  top: -1px;

  left: -1px;

  z-index: -1;

  border: none;

  background-color: #eee;

}

<div id="uploader" onclick="$('#filePhoto').click()">

    <p> click here or drag here to upload image</p>

    <img class="fimg" src="https://i.imgur.com/j0KblIu.png" />

</div>

<input type="file" name="userprofile_picture" id="filePhoto" />

<button type="button" id="cancel_file" style="display: none;">Cancel</button>





<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>

asked 21 hours ago

Sharvan

6691416

stackoverflow.com/questions/8006715/…
– ChintuYadavSara
20 hours ago

@ChintuYadavSara I have to show the image preview with close button
– Sharvan
20 hours ago

add a comment |

up vote
-1
down vote

favorite

var imageLoader = document.getElementById('filePhoto');

imageLoader.addEventListener('change', handleImage, false);



function handleImage(e) {

    var reader = new FileReader();

    reader.onload = function(event) {

        $('#uploader img').attr('src', event.target.result);

    }

    reader.readAsDataURL(e.target.files[0]);

    $('#cancel_file').show();

}



var dropbox;

dropbox = document.getElementById("uploader");

dropbox.addEventListener("dragenter", dragenter, false);

dropbox.addEventListener("dragover", dragover, false);

dropbox.addEventListener("drop", drop, false);



function dragenter(e) {

    e.stopPropagation();

    e.preventDefault();

}



function dragover(e) {

    e.stopPropagation();

    e.preventDefault();

}



function drop(e) {

    e.stopPropagation();

    e.preventDefault();

    //you can check e's properties

    //console.log(e);

    var dt = e.dataTransfer;

    var files = dt.files;



    //this code line fires your 'handleImage' function (imageLoader change event)

    imageLoader.files = files;

}

$('#cancel_file').click(function(e) {

    $('.fimg').attr('src', "https://i.imgur.com/j0KblIu.png");

    $('#cancel_file').hide();

});

#uploader {

  position: relative;

  overflow: hidden;

  width: 300px;

  height: 350px;

  background: transparent;

  border: 2px dashed #e8e8e8;

  cursor: pointer;

  padding: 5px;

  color: #555;

  font-family: 'Segoe UI';

  font-weight: bold;

} 

#uploader p {

  padding: 30px;

  text-align: center;

  position: relative;

  font-size: 25px;

  color: #000;

  top: 56px;

}	

#filePhoto {

  display: none;

}    

#uploader img {

  position: absolute;

  width: 100%;

  height: 362px;

  top: -1px;

  left: -1px;

  z-index: -1;

  border: none;

  background-color: #eee;

}

<div id="uploader" onclick="$('#filePhoto').click()">

    <p> click here or drag here to upload image</p>

    <img class="fimg" src="https://i.imgur.com/j0KblIu.png" />

</div>

<input type="file" name="userprofile_picture" id="filePhoto" />

<button type="button" id="cancel_file" style="display: none;">Cancel</button>





<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>

asked 21 hours ago

Sharvan

6691416

stackoverflow.com/questions/8006715/…
– ChintuYadavSara
20 hours ago

@ChintuYadavSara I have to show the image preview with close button
– Sharvan
20 hours ago

add a comment |

up vote
-1
down vote

favorite

var imageLoader = document.getElementById('filePhoto');

imageLoader.addEventListener('change', handleImage, false);



function handleImage(e) {

    var reader = new FileReader();

    reader.onload = function(event) {

        $('#uploader img').attr('src', event.target.result);

    }

    reader.readAsDataURL(e.target.files[0]);

    $('#cancel_file').show();

}



var dropbox;

dropbox = document.getElementById("uploader");

dropbox.addEventListener("dragenter", dragenter, false);

dropbox.addEventListener("dragover", dragover, false);

dropbox.addEventListener("drop", drop, false);



function dragenter(e) {

    e.stopPropagation();

    e.preventDefault();

}



function dragover(e) {

    e.stopPropagation();

    e.preventDefault();

}



function drop(e) {

    e.stopPropagation();

    e.preventDefault();

    //you can check e's properties

    //console.log(e);

    var dt = e.dataTransfer;

    var files = dt.files;



    //this code line fires your 'handleImage' function (imageLoader change event)

    imageLoader.files = files;

}

$('#cancel_file').click(function(e) {

    $('.fimg').attr('src', "https://i.imgur.com/j0KblIu.png");

    $('#cancel_file').hide();

});

#uploader {

  position: relative;

  overflow: hidden;

  width: 300px;

  height: 350px;

  background: transparent;

  border: 2px dashed #e8e8e8;

  cursor: pointer;

  padding: 5px;

  color: #555;

  font-family: 'Segoe UI';

  font-weight: bold;

} 

#uploader p {

  padding: 30px;

  text-align: center;

  position: relative;

  font-size: 25px;

  color: #000;

  top: 56px;

}	

#filePhoto {

  display: none;

}    

#uploader img {

  position: absolute;

  width: 100%;

  height: 362px;

  top: -1px;

  left: -1px;

  z-index: -1;

  border: none;

  background-color: #eee;

}

<div id="uploader" onclick="$('#filePhoto').click()">

    <p> click here or drag here to upload image</p>

    <img class="fimg" src="https://i.imgur.com/j0KblIu.png" />

</div>

<input type="file" name="userprofile_picture" id="filePhoto" />

<button type="button" id="cancel_file" style="display: none;">Cancel</button>





<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>

asked 21 hours ago

Sharvan

6691416

var imageLoader = document.getElementById('filePhoto');

imageLoader.addEventListener('change', handleImage, false);



function handleImage(e) {

    var reader = new FileReader();

    reader.onload = function(event) {

        $('#uploader img').attr('src', event.target.result);

    }

    reader.readAsDataURL(e.target.files[0]);

    $('#cancel_file').show();

}



var dropbox;

dropbox = document.getElementById("uploader");

dropbox.addEventListener("dragenter", dragenter, false);

dropbox.addEventListener("dragover", dragover, false);

dropbox.addEventListener("drop", drop, false);



function dragenter(e) {

    e.stopPropagation();

    e.preventDefault();

}



function dragover(e) {

    e.stopPropagation();

    e.preventDefault();

}



function drop(e) {

    e.stopPropagation();

    e.preventDefault();

    //you can check e's properties

    //console.log(e);

    var dt = e.dataTransfer;

    var files = dt.files;



    //this code line fires your 'handleImage' function (imageLoader change event)

    imageLoader.files = files;

}

$('#cancel_file').click(function(e) {

    $('.fimg').attr('src', "https://i.imgur.com/j0KblIu.png");

    $('#cancel_file').hide();

});

#uploader {

  position: relative;

  overflow: hidden;

  width: 300px;

  height: 350px;

  background: transparent;

  border: 2px dashed #e8e8e8;

  cursor: pointer;

  padding: 5px;

  color: #555;

  font-family: 'Segoe UI';

  font-weight: bold;

} 

#uploader p {

  padding: 30px;

  text-align: center;

  position: relative;

  font-size: 25px;

  color: #000;

  top: 56px;

}	

#filePhoto {

  display: none;

}    

#uploader img {

  position: absolute;

  width: 100%;

  height: 362px;

  top: -1px;

  left: -1px;

  z-index: -1;

  border: none;

  background-color: #eee;

}

<div id="uploader" onclick="$('#filePhoto').click()">

    <p> click here or drag here to upload image</p>

    <img class="fimg" src="https://i.imgur.com/j0KblIu.png" />

</div>

<input type="file" name="userprofile_picture" id="filePhoto" />

<button type="button" id="cancel_file" style="display: none;">Cancel</button>





<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>

var imageLoader = document.getElementById('filePhoto');

imageLoader.addEventListener('change', handleImage, false);



function handleImage(e) {

    var reader = new FileReader();

    reader.onload = function(event) {

        $('#uploader img').attr('src', event.target.result);

    }

    reader.readAsDataURL(e.target.files[0]);

    $('#cancel_file').show();

}



var dropbox;

dropbox = document.getElementById("uploader");

dropbox.addEventListener("dragenter", dragenter, false);

dropbox.addEventListener("dragover", dragover, false);

dropbox.addEventListener("drop", drop, false);



function dragenter(e) {

    e.stopPropagation();

    e.preventDefault();

}



function dragover(e) {

    e.stopPropagation();

    e.preventDefault();

}



function drop(e) {

    e.stopPropagation();

    e.preventDefault();

    //you can check e's properties

    //console.log(e);

    var dt = e.dataTransfer;

    var files = dt.files;



    //this code line fires your 'handleImage' function (imageLoader change event)

    imageLoader.files = files;

}

$('#cancel_file').click(function(e) {

    $('.fimg').attr('src', "https://i.imgur.com/j0KblIu.png");

    $('#cancel_file').hide();

});

#uploader {

  position: relative;

  overflow: hidden;

  width: 300px;

  height: 350px;

  background: transparent;

  border: 2px dashed #e8e8e8;

  cursor: pointer;

  padding: 5px;

  color: #555;

  font-family: 'Segoe UI';

  font-weight: bold;

} 

#uploader p {

  padding: 30px;

  text-align: center;

  position: relative;

  font-size: 25px;

  color: #000;

  top: 56px;

}	

#filePhoto {

  display: none;

}    

#uploader img {

  position: absolute;

  width: 100%;

  height: 362px;

  top: -1px;

  left: -1px;

  z-index: -1;

  border: none;

  background-color: #eee;

}

<div id="uploader" onclick="$('#filePhoto').click()">

    <p> click here or drag here to upload image</p>

    <img class="fimg" src="https://i.imgur.com/j0KblIu.png" />

</div>

<input type="file" name="userprofile_picture" id="filePhoto" />

<button type="button" id="cancel_file" style="display: none;">Cancel</button>





<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>

var imageLoader = document.getElementById('filePhoto');

imageLoader.addEventListener('change', handleImage, false);



function handleImage(e) {

    var reader = new FileReader();

    reader.onload = function(event) {

        $('#uploader img').attr('src', event.target.result);

    }

    reader.readAsDataURL(e.target.files[0]);

    $('#cancel_file').show();

}



var dropbox;

dropbox = document.getElementById("uploader");

dropbox.addEventListener("dragenter", dragenter, false);

dropbox.addEventListener("dragover", dragover, false);

dropbox.addEventListener("drop", drop, false);



function dragenter(e) {

    e.stopPropagation();

    e.preventDefault();

}



function dragover(e) {

    e.stopPropagation();

    e.preventDefault();

}



function drop(e) {

    e.stopPropagation();

    e.preventDefault();

    //you can check e's properties

    //console.log(e);

    var dt = e.dataTransfer;

    var files = dt.files;



    //this code line fires your 'handleImage' function (imageLoader change event)

    imageLoader.files = files;

}

$('#cancel_file').click(function(e) {

    $('.fimg').attr('src', "https://i.imgur.com/j0KblIu.png");

    $('#cancel_file').hide();

});

#uploader {

  position: relative;

  overflow: hidden;

  width: 300px;

  height: 350px;

  background: transparent;

  border: 2px dashed #e8e8e8;

  cursor: pointer;

  padding: 5px;

  color: #555;

  font-family: 'Segoe UI';

  font-weight: bold;

} 

#uploader p {

  padding: 30px;

  text-align: center;

  position: relative;

  font-size: 25px;

  color: #000;

  top: 56px;

}	

#filePhoto {

  display: none;

}    

#uploader img {

  position: absolute;

  width: 100%;

  height: 362px;

  top: -1px;

  left: -1px;

  z-index: -1;

  border: none;

  background-color: #eee;

}

<div id="uploader" onclick="$('#filePhoto').click()">

    <p> click here or drag here to upload image</p>

    <img class="fimg" src="https://i.imgur.com/j0KblIu.png" />

</div>

<input type="file" name="userprofile_picture" id="filePhoto" />

<button type="button" id="cancel_file" style="display: none;">Cancel</button>





<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>

javascript html css file-upload

asked 21 hours ago

Sharvan

6691416

asked 21 hours ago

Sharvan

6691416

asked 21 hours ago

Sharvan

6691416

asked 21 hours ago

Sharvan

6691416

asked 21 hours ago

Sharvan

6691416

stackoverflow.com/questions/8006715/…
– ChintuYadavSara
20 hours ago

@ChintuYadavSara I have to show the image preview with close button
– Sharvan
20 hours ago

add a comment |

stackoverflow.com/questions/8006715/…
– ChintuYadavSara
20 hours ago

@ChintuYadavSara I have to show the image preview with close button
– Sharvan
20 hours ago

stackoverflow.com/questions/8006715/…
– ChintuYadavSara
20 hours ago

@ChintuYadavSara I have to show the image preview with close button
– Sharvan
20 hours ago

add a comment |

1 Answer
1

active

oldest

votes

up vote
1
down vote

accepted

May be imageLoader.files = files; don't trigger "change event" in firefox so that i have manually triggered change event in drop function and it works for me, you can try this

var imageLoader = document.getElementById('filePhoto');

imageLoader.addEventListener('change', handleImage, false);



function handleImage(e) {

    var reader = new FileReader();

    reader.onload = function(event) {

        $('#uploader img').attr('src', event.target.result);

    }

    reader.readAsDataURL(e.target.files[0]);

    $('#cancel_file').show();

}



var dropbox;

dropbox = document.getElementById("uploader");

dropbox.addEventListener("dragenter", dragenter, false);

dropbox.addEventListener("dragover", dragover, false);

dropbox.addEventListener("drop", drop, false);



function dragenter(e) {

    e.stopPropagation();

    e.preventDefault();

}



function dragover(e) {

    e.stopPropagation();

    e.preventDefault();

}



function drop(e) {

    e.stopPropagation();

    e.preventDefault();

    //you can check e's properties

    //console.log(e);

    var dt = e.dataTransfer;

    var files = dt.files;

    //this code line fires your 'handleImage' function (imageLoader change event)

    

    imageLoader.files = files;

    

    // Create a new 'change' event

    var event = new Event('change');

    // Dispatch it.

    imageLoader.dispatchEvent(event);



}

$('#cancel_file').click(function(e) {

    $('.fimg').attr('src', "https://i.imgur.com/j0KblIu.png");

    $('#cancel_file').hide();

});

#uploader {

  position: relative;

  overflow: hidden;

  width: 300px;

  height: 350px;

  background: transparent;

  border: 2px dashed #e8e8e8;

  cursor: pointer;

  padding: 5px;

  color: #555;

  font-family: 'Segoe UI';

  font-weight: bold;

} 

#uploader p {

  padding: 30px;

  text-align: center;

  position: relative;

  font-size: 25px;

  color: #000;

  top: 56px;

}	

#filePhoto {

  display: none;

}    

#uploader img {

  position: absolute;

  width: 100%;

  height: 362px;

  top: -1px;

  left: -1px;

  z-index: -1;

  border: none;

  background-color: #eee;

}

<div id="uploader" onclick="$('#filePhoto').click()">

    <p> click here or drag here to upload image</p>

    <img class="fimg" src="https://i.imgur.com/j0KblIu.png" />

</div>

<input type="file" name="userprofile_picture" id="filePhoto" />

<button type="button" id="cancel_file" style="display: none;">Cancel</button>





<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>

answered 19 hours ago

Nidhi

1,0361316

thank you. Working good.
– Sharvan
5 hours ago

add a comment |

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',
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');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53370893%2fdrag-and-drop-file-upload-not-working-in-firefox%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
1
down vote

accepted

May be imageLoader.files = files; don't trigger "change event" in firefox so that i have manually triggered change event in drop function and it works for me, you can try this

var imageLoader = document.getElementById('filePhoto');

imageLoader.addEventListener('change', handleImage, false);



function handleImage(e) {

    var reader = new FileReader();

    reader.onload = function(event) {

        $('#uploader img').attr('src', event.target.result);

    }

    reader.readAsDataURL(e.target.files[0]);

    $('#cancel_file').show();

}



var dropbox;

dropbox = document.getElementById("uploader");

dropbox.addEventListener("dragenter", dragenter, false);

dropbox.addEventListener("dragover", dragover, false);

dropbox.addEventListener("drop", drop, false);



function dragenter(e) {

    e.stopPropagation();

    e.preventDefault();

}



function dragover(e) {

    e.stopPropagation();

    e.preventDefault();

}



function drop(e) {

    e.stopPropagation();

    e.preventDefault();

    //you can check e's properties

    //console.log(e);

    var dt = e.dataTransfer;

    var files = dt.files;

    //this code line fires your 'handleImage' function (imageLoader change event)

    

    imageLoader.files = files;

    

    // Create a new 'change' event

    var event = new Event('change');

    // Dispatch it.

    imageLoader.dispatchEvent(event);



}

$('#cancel_file').click(function(e) {

    $('.fimg').attr('src', "https://i.imgur.com/j0KblIu.png");

    $('#cancel_file').hide();

});

#uploader {

  position: relative;

  overflow: hidden;

  width: 300px;

  height: 350px;

  background: transparent;

  border: 2px dashed #e8e8e8;

  cursor: pointer;

  padding: 5px;

  color: #555;

  font-family: 'Segoe UI';

  font-weight: bold;

} 

#uploader p {

  padding: 30px;

  text-align: center;

  position: relative;

  font-size: 25px;

  color: #000;

  top: 56px;

}	

#filePhoto {

  display: none;

}    

#uploader img {

  position: absolute;

  width: 100%;

  height: 362px;

  top: -1px;

  left: -1px;

  z-index: -1;

  border: none;

  background-color: #eee;

}

<div id="uploader" onclick="$('#filePhoto').click()">

    <p> click here or drag here to upload image</p>

    <img class="fimg" src="https://i.imgur.com/j0KblIu.png" />

</div>

<input type="file" name="userprofile_picture" id="filePhoto" />

<button type="button" id="cancel_file" style="display: none;">Cancel</button>





<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>

answered 19 hours ago

Nidhi

1,0361316

thank you. Working good.
– Sharvan
5 hours ago

add a comment |

up vote
1
down vote

accepted

May be imageLoader.files = files; don't trigger "change event" in firefox so that i have manually triggered change event in drop function and it works for me, you can try this

var imageLoader = document.getElementById('filePhoto');

imageLoader.addEventListener('change', handleImage, false);



function handleImage(e) {

    var reader = new FileReader();

    reader.onload = function(event) {

        $('#uploader img').attr('src', event.target.result);

    }

    reader.readAsDataURL(e.target.files[0]);

    $('#cancel_file').show();

}



var dropbox;

dropbox = document.getElementById("uploader");

dropbox.addEventListener("dragenter", dragenter, false);

dropbox.addEventListener("dragover", dragover, false);

dropbox.addEventListener("drop", drop, false);



function dragenter(e) {

    e.stopPropagation();

    e.preventDefault();

}



function dragover(e) {

    e.stopPropagation();

    e.preventDefault();

}



function drop(e) {

    e.stopPropagation();

    e.preventDefault();

    //you can check e's properties

    //console.log(e);

    var dt = e.dataTransfer;

    var files = dt.files;

    //this code line fires your 'handleImage' function (imageLoader change event)

    

    imageLoader.files = files;

    

    // Create a new 'change' event

    var event = new Event('change');

    // Dispatch it.

    imageLoader.dispatchEvent(event);



}

$('#cancel_file').click(function(e) {

    $('.fimg').attr('src', "https://i.imgur.com/j0KblIu.png");

    $('#cancel_file').hide();

});

#uploader {

  position: relative;

  overflow: hidden;

  width: 300px;

  height: 350px;

  background: transparent;

  border: 2px dashed #e8e8e8;

  cursor: pointer;

  padding: 5px;

  color: #555;

  font-family: 'Segoe UI';

  font-weight: bold;

} 

#uploader p {

  padding: 30px;

  text-align: center;

  position: relative;

  font-size: 25px;

  color: #000;

  top: 56px;

}	

#filePhoto {

  display: none;

}    

#uploader img {

  position: absolute;

  width: 100%;

  height: 362px;

  top: -1px;

  left: -1px;

  z-index: -1;

  border: none;

  background-color: #eee;

}

<div id="uploader" onclick="$('#filePhoto').click()">

    <p> click here or drag here to upload image</p>

    <img class="fimg" src="https://i.imgur.com/j0KblIu.png" />

</div>

<input type="file" name="userprofile_picture" id="filePhoto" />

<button type="button" id="cancel_file" style="display: none;">Cancel</button>





<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>

answered 19 hours ago

Nidhi

1,0361316

thank you. Working good.
– Sharvan
5 hours ago

add a comment |

up vote
1
down vote

accepted

May be imageLoader.files = files; don't trigger "change event" in firefox so that i have manually triggered change event in drop function and it works for me, you can try this

var imageLoader = document.getElementById('filePhoto');

imageLoader.addEventListener('change', handleImage, false);



function handleImage(e) {

    var reader = new FileReader();

    reader.onload = function(event) {

        $('#uploader img').attr('src', event.target.result);

    }

    reader.readAsDataURL(e.target.files[0]);

    $('#cancel_file').show();

}



var dropbox;

dropbox = document.getElementById("uploader");

dropbox.addEventListener("dragenter", dragenter, false);

dropbox.addEventListener("dragover", dragover, false);

dropbox.addEventListener("drop", drop, false);



function dragenter(e) {

    e.stopPropagation();

    e.preventDefault();

}



function dragover(e) {

    e.stopPropagation();

    e.preventDefault();

}



function drop(e) {

    e.stopPropagation();

    e.preventDefault();

    //you can check e's properties

    //console.log(e);

    var dt = e.dataTransfer;

    var files = dt.files;

    //this code line fires your 'handleImage' function (imageLoader change event)

    

    imageLoader.files = files;

    

    // Create a new 'change' event

    var event = new Event('change');

    // Dispatch it.

    imageLoader.dispatchEvent(event);



}

$('#cancel_file').click(function(e) {

    $('.fimg').attr('src', "https://i.imgur.com/j0KblIu.png");

    $('#cancel_file').hide();

});

#uploader {

  position: relative;

  overflow: hidden;

  width: 300px;

  height: 350px;

  background: transparent;

  border: 2px dashed #e8e8e8;

  cursor: pointer;

  padding: 5px;

  color: #555;

  font-family: 'Segoe UI';

  font-weight: bold;

} 

#uploader p {

  padding: 30px;

  text-align: center;

  position: relative;

  font-size: 25px;

  color: #000;

  top: 56px;

}	

#filePhoto {

  display: none;

}    

#uploader img {

  position: absolute;

  width: 100%;

  height: 362px;

  top: -1px;

  left: -1px;

  z-index: -1;

  border: none;

  background-color: #eee;

}

<div id="uploader" onclick="$('#filePhoto').click()">

    <p> click here or drag here to upload image</p>

    <img class="fimg" src="https://i.imgur.com/j0KblIu.png" />

</div>

<input type="file" name="userprofile_picture" id="filePhoto" />

<button type="button" id="cancel_file" style="display: none;">Cancel</button>





<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>

answered 19 hours ago

Nidhi

1,0361316

May be imageLoader.files = files; don't trigger "change event" in firefox so that i have manually triggered change event in drop function and it works for me, you can try this

var imageLoader = document.getElementById('filePhoto');

imageLoader.addEventListener('change', handleImage, false);



function handleImage(e) {

    var reader = new FileReader();

    reader.onload = function(event) {

        $('#uploader img').attr('src', event.target.result);

    }

    reader.readAsDataURL(e.target.files[0]);

    $('#cancel_file').show();

}



var dropbox;

dropbox = document.getElementById("uploader");

dropbox.addEventListener("dragenter", dragenter, false);

dropbox.addEventListener("dragover", dragover, false);

dropbox.addEventListener("drop", drop, false);



function dragenter(e) {

    e.stopPropagation();

    e.preventDefault();

}



function dragover(e) {

    e.stopPropagation();

    e.preventDefault();

}



function drop(e) {

    e.stopPropagation();

    e.preventDefault();

    //you can check e's properties

    //console.log(e);

    var dt = e.dataTransfer;

    var files = dt.files;

    //this code line fires your 'handleImage' function (imageLoader change event)

    

    imageLoader.files = files;

    

    // Create a new 'change' event

    var event = new Event('change');

    // Dispatch it.

    imageLoader.dispatchEvent(event);



}

$('#cancel_file').click(function(e) {

    $('.fimg').attr('src', "https://i.imgur.com/j0KblIu.png");

    $('#cancel_file').hide();

});

#uploader {

  position: relative;

  overflow: hidden;

  width: 300px;

  height: 350px;

  background: transparent;

  border: 2px dashed #e8e8e8;

  cursor: pointer;

  padding: 5px;

  color: #555;

  font-family: 'Segoe UI';

  font-weight: bold;

} 

#uploader p {

  padding: 30px;

  text-align: center;

  position: relative;

  font-size: 25px;

  color: #000;

  top: 56px;

}	

#filePhoto {

  display: none;

}    

#uploader img {

  position: absolute;

  width: 100%;

  height: 362px;

  top: -1px;

  left: -1px;

  z-index: -1;

  border: none;

  background-color: #eee;

}

<div id="uploader" onclick="$('#filePhoto').click()">

    <p> click here or drag here to upload image</p>

    <img class="fimg" src="https://i.imgur.com/j0KblIu.png" />

</div>

<input type="file" name="userprofile_picture" id="filePhoto" />

<button type="button" id="cancel_file" style="display: none;">Cancel</button>





<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>

var imageLoader = document.getElementById('filePhoto');

imageLoader.addEventListener('change', handleImage, false);



function handleImage(e) {

    var reader = new FileReader();

    reader.onload = function(event) {

        $('#uploader img').attr('src', event.target.result);

    }

    reader.readAsDataURL(e.target.files[0]);

    $('#cancel_file').show();

}



var dropbox;

dropbox = document.getElementById("uploader");

dropbox.addEventListener("dragenter", dragenter, false);

dropbox.addEventListener("dragover", dragover, false);

dropbox.addEventListener("drop", drop, false);



function dragenter(e) {

    e.stopPropagation();

    e.preventDefault();

}



function dragover(e) {

    e.stopPropagation();

    e.preventDefault();

}



function drop(e) {

    e.stopPropagation();

    e.preventDefault();

    //you can check e's properties

    //console.log(e);

    var dt = e.dataTransfer;

    var files = dt.files;

    //this code line fires your 'handleImage' function (imageLoader change event)

    

    imageLoader.files = files;

    

    // Create a new 'change' event

    var event = new Event('change');

    // Dispatch it.

    imageLoader.dispatchEvent(event);



}

$('#cancel_file').click(function(e) {

    $('.fimg').attr('src', "https://i.imgur.com/j0KblIu.png");

    $('#cancel_file').hide();

});

#uploader {

  position: relative;

  overflow: hidden;

  width: 300px;

  height: 350px;

  background: transparent;

  border: 2px dashed #e8e8e8;

  cursor: pointer;

  padding: 5px;

  color: #555;

  font-family: 'Segoe UI';

  font-weight: bold;

} 

#uploader p {

  padding: 30px;

  text-align: center;

  position: relative;

  font-size: 25px;

  color: #000;

  top: 56px;

}	

#filePhoto {

  display: none;

}    

#uploader img {

  position: absolute;

  width: 100%;

  height: 362px;

  top: -1px;

  left: -1px;

  z-index: -1;

  border: none;

  background-color: #eee;

}

<div id="uploader" onclick="$('#filePhoto').click()">

    <p> click here or drag here to upload image</p>

    <img class="fimg" src="https://i.imgur.com/j0KblIu.png" />

</div>

<input type="file" name="userprofile_picture" id="filePhoto" />

<button type="button" id="cancel_file" style="display: none;">Cancel</button>





<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>

var imageLoader = document.getElementById('filePhoto');

imageLoader.addEventListener('change', handleImage, false);



function handleImage(e) {

    var reader = new FileReader();

    reader.onload = function(event) {

        $('#uploader img').attr('src', event.target.result);

    }

    reader.readAsDataURL(e.target.files[0]);

    $('#cancel_file').show();

}



var dropbox;

dropbox = document.getElementById("uploader");

dropbox.addEventListener("dragenter", dragenter, false);

dropbox.addEventListener("dragover", dragover, false);

dropbox.addEventListener("drop", drop, false);



function dragenter(e) {

    e.stopPropagation();

    e.preventDefault();

}



function dragover(e) {

    e.stopPropagation();

    e.preventDefault();

}



function drop(e) {

    e.stopPropagation();

    e.preventDefault();

    //you can check e's properties

    //console.log(e);

    var dt = e.dataTransfer;

    var files = dt.files;

    //this code line fires your 'handleImage' function (imageLoader change event)

    

    imageLoader.files = files;

    

    // Create a new 'change' event

    var event = new Event('change');

    // Dispatch it.

    imageLoader.dispatchEvent(event);



}

$('#cancel_file').click(function(e) {

    $('.fimg').attr('src', "https://i.imgur.com/j0KblIu.png");

    $('#cancel_file').hide();

});

#uploader {

  position: relative;

  overflow: hidden;

  width: 300px;

  height: 350px;

  background: transparent;

  border: 2px dashed #e8e8e8;

  cursor: pointer;

  padding: 5px;

  color: #555;

  font-family: 'Segoe UI';

  font-weight: bold;

} 

#uploader p {

  padding: 30px;

  text-align: center;

  position: relative;

  font-size: 25px;

  color: #000;

  top: 56px;

}	

#filePhoto {

  display: none;

}    

#uploader img {

  position: absolute;

  width: 100%;

  height: 362px;

  top: -1px;

  left: -1px;

  z-index: -1;

  border: none;

  background-color: #eee;

}

<div id="uploader" onclick="$('#filePhoto').click()">

    <p> click here or drag here to upload image</p>

    <img class="fimg" src="https://i.imgur.com/j0KblIu.png" />

</div>

<input type="file" name="userprofile_picture" id="filePhoto" />

<button type="button" id="cancel_file" style="display: none;">Cancel</button>





<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>

answered 19 hours ago

Nidhi

1,0361316

answered 19 hours ago

Nidhi

1,0361316

answered 19 hours ago

Nidhi

1,0361316

answered 19 hours ago

Nidhi

1,0361316

thank you. Working good.
– Sharvan
5 hours ago

add a comment |

thank you. Working good.
– Sharvan
5 hours ago

thank you. Working good.
– Sharvan
5 hours ago

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Tukukkk