Reorganizar thumbs do preview com javascript puro

[luiz monteiro 0]

Boa noite!

Minha questão de hoje é de que o cliente quer arrastar imagem por imagem no drag an drop. 

Com o que com consegui na internet é possível arrastar todas em uma única vez, se arrastar novamente atualiza os thumbs pelo mais recente.

Além disso, ele quer arrastar os thumbs para que o upload tenha aquela sequencia, ou seja, os thumbs tem que ter um drag para organizar na sequencia que ele precisa.

A questão principal é como criar esse drag nos thumbs para organizar os mesmos e como modificar o input files para seguir essa sequencia?

Agradeço desde já.

[wanderval 19]

Olha, isso depende muito da funcionalidade esperada, pelo que descreveu não é possivel definir a vontade do cliente com a necessidade para alcançar a funcionalidade.

 

A sequencia é importante, por qual razão?

O upload será feito em uma fila ou é esperado paralelismo? se sim, O tamanho do arquivo suportando pelo upload, pode interferir na transferencia?

O client deseja feedback do upload individual em caso de falha ou sucesso?

 

Mas respondendo sua pergunta, dependendo da sua lógica eu pensaria em usar esse dropzone relacionado a alguma logica de clone do input ou interação do dropzone, mas isso depente muito da usabilidade esperada, ela vai definir o que você pode ou não fazer

 

 

[luiz monteiro 0]

Eu estou tentando adaptar esse que encontrei na net e modifiquei.

Aqui ele adiciona os thumbs de um em um, porem o php só recebe o último arquivo inserido.

Tentei fazer o for porem nada deu certo.

 

  const file = inputTarget.files;

 

 if (file) {
    const reader = new FileReader();

  

  for (let i = 0; i < file.length; i++)

{

    reader.addEventListener("load", function (e) {
      const readerTarget = e.target;

      const img = document.createElement("img");
      img.src = readerTarget.result;

      thumbs.appendChild(img);
    });

    reader.readAsDataURL(file);
    console.log(inputFile.files);

}

 

Nada deu certo..................

 

 

O script que estou usando é o seguinte.

 

<style type="text/css">
    
#imput_file {
  display: none;
}

.area_input {
  width: 400px;
  aspect-ratio: 16/9;
  background: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  border: 2px dashed currentcolor;
  cursor: pointer;
  font-family: sans-serif;
  transition: color 100ms ease-in-out, background 100ms ease-in-out;
  outline: none;
  margin: auto;
  margin-top: 30px;
}

.area_input:hover {
  color: #777;
  background: #999;
}

.area_input:active {
  border-color: turquoise;
  color: turquoise;
  background: #eee;
}

.area_input:focus {
  color: #777;
  background: #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.area_input__img {
  width: 100%;
  max-width: 150px;
  height: 100%;
  max-width: 150px;
}

.box
{
    width: 100%;
    margin: auto;
    margin-top: 100px;
}

#recebe_thumb
{
    display: flex;
    justify-content: center;
    column-gap: 10px;
    grid-row-gap: 10px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 600px;
    height: 100%;
    max-height: 600px;
}

#recebe_thumb img
{
    width: 100%;
    max-width: 100px;
    height: 100%;
    max-height: 100px;
}

</style>

<form method="POST" action="#" enctype="multipart/form-data">

<label class="area_input" for="imput_file" tabIndex="0" id="drop">
    <input type="file" name="imput_file[]" id="imput_file" multiple>
    <span id="texto"></span>
</label>

<br>
<button>test</button>
    
</form>

<div class="box">
  <div id="recebe_thumb" draggable="true"></div>
</div>

<script type="text/javascript">
    
let inputFile = document.querySelector("#imput_file");
let thumbs = document.querySelector("#recebe_thumb");
let areaDrop = document.querySelector("#drop");

let text_shwoed = "Click ou solte as imagens aqui";

let text = document.querySelector("#texto");

text.innerHTML = text_shwoed;

inputFile.addEventListener("change", function (e) {
  const inputTarget = e.target;
  const file = inputTarget.files[0];

  if (file) {
    const reader = new FileReader();

    reader.addEventListener("load", function (e) {
      const readerTarget = e.target;

      const img = document.createElement("img");
      img.src = readerTarget.result;

      thumbs.appendChild(img);
    });

    reader.readAsDataURL(file);

  } else {
    text.innerHTML = text_shwoed;
  }
});
 

 

Preciso mostrar os thumbs quando forem inseridos vários de uma única vez e/ou de um em um.

Também preciso adicionar no files para que o PHP capture, mesmo quando adicionado de um em um.

Grato por enquanto.

 

 

 

 

[Omar~ 87]

Ao meu ver o problema principal é um único input para tudo.

Para cada imagem/arquivo um input deveria ser criado para tal.

 

 

[luiz monteiro 0]

Bom dia!

A minha maior dificuldade está em manipular o files, tipo como pegar cada arquivo selecionado e adicionar em um novo input files com um botão delete para cada um deles.

Tentei com o FileReader como no for mostrado acima, mas sem sucesso.

Eu imagino que seja algo parecido com isso.

 

let inputFile = document.querySelector("#imput_file");

const file = inputTarget.files;

 

 if (file) {
    const reader = new FileReader();

  for (let i = 0; i < file.length; i++)

{

    reader.addEventListener("load", function (e) {

      const readerTarget = e.target;

      const inputFile = document.createElement('input');
      inputFile.type = "file";
      inputFile.value = "como passo o valor? É assim mesmo, inputFile.value?";
      inputFile.name = "preciso ter um diferente nome para cada um?";

      document.document.querySelector('#div_recebe_botao_input').appendChild(inputFile);

      const botaoDelete = document.createElement("button");
      botaoDelete.value = "como passo o valor? É assim mesmo, botaoDelete.value";
      botaoDelete.name = "preciso ter um diferente nome para cada um?";
      botaoDelete.innerHTML = 'Excluir';

      document.document.querySelector('#div_recebe_botao_delete').appendChild(botaoDelete);

      o_que_preciso_aqui.appendChild(o que vai aqui?);
    });

    o_que_preciso_aqui.readAsDataURL(o que vai aqui?);

}
}

Imagino que minha ideia esteja certa, porem na prática nada acontece.

 

Grato pela atenção.

 

[luiz monteiro 0]

Boa tarde!

 

Tive que adaptar esses script  jquery que peguei no stackoverflow.

 

window.AddConteudo = function() {
	var texto = $('#texto').val();
	$('#texto').val('');
	$('#ConteudoMateria').append('<div class="DivPadrao">' + texto + '<br><a href="#" class="MoveUp">Mover p/ cima</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#" class="MoveDown">Mover p/ baixo</a></div>');
	}
	function MoverBlocoConteudo(index, moveUp) {
	var itemlist = $('#ConteudoMateria');
	var len = $(itemlist).children().length;
	var thisElement = jQuery($(itemlist).children().eq(index));
	var nextPosition = (moveUp) ? index - 1 : index + 1;
	if (moveUp) {
	jQuery($(itemlist).children().eq(nextPosition)).before(thisElement);
	} else if (!moveUp) {
	jQuery($(itemlist).children().eq(nextPosition)).after(thisElement);
	}
	}
	$(document).ready(function() {
	$("#ConteudoMateria").on('click', '.MoveUp, .MoveDown', function(e) {
	e.preventDefault();
	var index = $(this).parents('.DivPadrao').index();
	var isMoveUp = $(this).hasClass('MoveUp');
	MoverBlocoConteudo(index, isMoveUp)
	});
	});
	//]]></script>
	<script>
	// tell the embed parent frame the height of the content
	if (window.parent && window.parent.parent){
	window.parent.parent.postMessage(["resultsFrame", {
	height: document.body.getBoundingClientRect().height,
	slug: "5w7svk02"
	}], "*")
	}
	// always overwrite window.name, in case users try to set it manually
	window.name = "result"
	</script>
	<script>
	let allLines = []
	window.addEventListener("message", (message) => {
	if (message.data.console){
	let insert = document.querySelector("#insert")
	allLines.push(message.data.console.payload)
	insert.innerHTML = allLines.join(";\r")
	let result = eval.call(null, message.data.console.payload)
	if (result !== undefined){
	console.log(result)
	}
	}
	})     Obrigado pela ajuda galera. E espero que isso ajude mais alguem.