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 Nov 19 at 8:32

Sharvan

6941416

stackoverflow.com/questions/8006715/…
– ChintuYadavSara
Nov 19 at 9:49

@ChintuYadavSara I have to show the image preview with close button
– Sharvan
Nov 19 at 9:52

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 Nov 19 at 8:32

Sharvan

6941416

stackoverflow.com/questions/8006715/…
– ChintuYadavSara
Nov 19 at 9:49

@ChintuYadavSara I have to show the image preview with close button
– Sharvan
Nov 19 at 9:52

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 Nov 19 at 8:32

Sharvan

6941416

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 Nov 19 at 8:32

Sharvan

6941416

asked Nov 19 at 8:32

Sharvan

6941416

asked Nov 19 at 8:32

Sharvan

6941416

asked Nov 19 at 8:32

Sharvan

6941416

asked Nov 19 at 8:32

Sharvan

6941416

stackoverflow.com/questions/8006715/…
– ChintuYadavSara
Nov 19 at 9:49

@ChintuYadavSara I have to show the image preview with close button
– Sharvan
Nov 19 at 9:52

add a comment |

stackoverflow.com/questions/8006715/…
– ChintuYadavSara
Nov 19 at 9:49

@ChintuYadavSara I have to show the image preview with close button
– Sharvan
Nov 19 at 9:52

stackoverflow.com/questions/8006715/…
– ChintuYadavSara
Nov 19 at 9:49

@ChintuYadavSara I have to show the image preview with close button
– Sharvan
Nov 19 at 9:52

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 Nov 19 at 10:28

Nidhi

1,1211316

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 Nov 19 at 10:28

Nidhi

1,1211316

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 Nov 19 at 10:28

Nidhi

1,1211316

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 Nov 19 at 10:28

Nidhi

1,1211316

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 Nov 19 at 10:28

Nidhi

1,1211316

answered Nov 19 at 10:28

Nidhi

1,1211316

answered Nov 19 at 10:28

Nidhi

1,1211316

answered Nov 19 at 10:28

Nidhi

1,1211316

add a comment |

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.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

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

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

搜尋此網誌

Nsryjdtyk