I am currently utilizing droparea js for uploading images. However, I have encountered an issue where if I try to upload an image in one of the upload menus, it ends up changing all four upload menus simultaneously.
<div class="col-md-12">
<div class="droparea">
<img src="http://placehold.it/200" class="file_preview">
</div>
<input type="file" name="file" id="file" accept="image/*" style="display: none;">
<div class="col-md-12">
<div class="droparea">
<img src="http://placehold.it/200" class="file_preview">
</div>
<input type="file" name="file" id="file" accept="image/*" style="display: none;">
<div class="col-md-12">
<div class="droparea">
<img src="http://placehold.it/200" class="file_preview">
</div>
<input type="file" name="file" id="file" accept="image/*" style="display: none;">
<div class="col-md-12">
<div class="droparea">
<img src="http://placehold.it/200" class="file_preview">
</div>
<input type="file" name="file" id="file" accept="image/*" style="display: none;">
<script src="js/droparea.js"></script>
<script>
$(document).ready(function(){
$('.droparea').droparea({
url: 'server.php',
success: function( server_return, name, uploaded_file )
{
$('.droparea').after( $('<p />').html( 'File sent: <b>' + name + '</b>' ) );
var oFReader = new FileReader();
oFReader.readAsDataURL( uploaded_file );
oFReader.onload = function (oFREvent)
{
$( '.file_preview' ).animate({opacity: 0}, 'slow', function(){
// change the image source
$(this)
.attr('src', oFREvent.target.result).animate({opacity: 1}, 'fast')
.on('load', function()
{
$('.statusbar').css({
width: $('.droparea').outerWidth(),
height: $('.droparea').outerHeight()
});
});
// remove the alert block whenever it exists.
$('.droparea').find('.statusbar.alert-block').fadeOut('slow', function(){ $(this).remove(); });
});
};
}
});
});
</script>
I would like to share this on jsfiddle, but unfortunately, I cannot find the online resources (js and css) for the droparea plugin.
When attempting to upload an image in any menu except the first one, the result always appears in the first menu. To address this, I changed from id="file-preview" to class="file-preview", resulting in the same display for all. Can someone guide me on how to enable uploading different images in each menu?