Strategy of how to save images (with preview) in CRUD of products

Question

What is the best way to work with upload of images of products for example: as linkar the images with the product X, so that before completing the product registration, the user can remove, etc.

And when to edit, the user goes there, does all the "exchange-exchange" of images and ends not completing the operation. What better option for an image exchange "Fake" and that when you return for a new edition, everything will be as before?

As an example the MercadoLivre or OLX. You create your ad, add the images.. if you keep going back and forth the images are always synchronized.

Answer 1

The ideal is that you put your code to facilitate the life of those who want to help you.

<legend class="leg_img">Insira imagens</legend>
<fieldset id="upload_img" class="nf_class upload_img">
    <input type="file" id="files" name="files[]" multiple accept="image/*" style="display:none;" />
    <a href="#" id="fileSelect" >selecionar</a>
    <div id="list" style="margin-bottom:0;"></div>
</fieldset>

<script type="text/javascript">
var fileSelect = document.getElementById("fileSelect");
var	fileElem = document.getElementById("files");

fileSelect.addEventListener("click", function(e)
{
	fileSelect.style.cssFloat = "right";
	fileSelect.style.marginRight = "3px";
	fileSelect.style.marginTop = "-3px";
	if(fileElem)
	{
		fileElem.click();
	}
	e.preventDefault();
}, false);

function handleFileSelect(evt)
{
	var	list = document.getElementById("list").childElementCount;
	var files = evt.target.files;
    var qtde = files.length;
    var nomes = fileElem.files;
    var nome;
    	
    if(qtde > 3 || list > 2)
    {
    	alert('apenas 3');
    	document.getElementById('files').value = ""; 
    	return;
    }else
    {
    	for(var i = 0, f; f = files[i]; i++)
    	{
    		if(!f.type.match('image.*'))
    		{
        		continue;
        	}
        	var reader = new FileReader();
			reader.onload = (function(theFile)
			{
			   	return function(e)
			   	{
		        	var span = document.createElement('span');
		            span.innerHTML = 
	"<a href='#'><img style='float:left;padding: 3px;height: 33px; width: 33px; border: 1px solid #c7c7c7;margin-top: 0px;' src='" + e.target.result + "'" + "title='" + escape(theFile.name) + "'/><img class='icon-del-img' style='float:left;margin-left:-41px;' src='img/icon-del-img.svg'/></a>";
		            document.getElementById('list').insertBefore(span, null);
		            span.children[0].addEventListener("click", function(evt)
		            {
	                	span.parentNode.removeChild(span);
	                });
		        };
		    })(f);
        	reader.readAsDataURL(f);
        } 
        return true;}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

Answer 2

See the image below for the relational database template you need to use.

The strategy would be: When you open the add product form you will already have to create an item in the products table with the status that defines that this product is still being uploaded. The insertion of the images should be done via Ajax and the relationship in the table is already added when finishing the image upload.

Relationship between Product and Image