Jump to content
luiz monteiro

Reorganizar thumbs do preview com javascript puro

Recommended Posts

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á.

Share this post


Link to post
Share on other sites

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

 

 

Share this post


Link to post
Share on other sites

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.

 

 

 

 

Share this post


Link to post
Share on other sites

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

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

 

 

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By ILR master
      Fala pessoal, tudo bem?
       
      Tô tentando fazer um pre-loading, mas não consigo de jeito algum.
      Quero mostrar uma animação enquanto a página é carregada e depois de caregada, esconder a animação e mostrar conteúdo.
       
      Aguém pode me ajudar?
       
      Segue código abaixo
       
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
          <title>PÁGINA LOAD</title>

      <style type="text/css">
      .loadclass {
          border: 2px solid #f3f3f3; /* Light grey */
          border-top: 4px solid #ffc401; /* Blue */
          border-radius: 50%;
          width: 50px;
          height: 50px;
          animation: spin 2s linear infinite;
      }
      @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
      }
      .conteudo {
          display:none;
      }
      </style>
      <script>
          function loading(){
              document.getElementsByClassName('loadclass')[0].style.display="none";
              document.getElementsByClassName('conteudo').style.display="block";
          }
      </script>
      </head>
      <body onLoad="loading()">
      <div class="loadclass"></div>
      <div class="conteudo">SEU CONTEUDO AQUI DENTRO!!!</div>
      </body>
      </html>
    • By ILR master
      Pessoal, pergunta bem simples. Abaixo tenho o seguinte código:
       
      <script>
      function alerta()
      {
        if (window.confirm("Você realmente quer sair?")) {
          window.open("sair.html");
      }
      }
      </script>
       
      Funciona perfeitamente, só que está abrindo em outra janela e quero que abra na mesma janela.
       
      Alguém pode me ajudar?
    • By Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • By Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • By belann
      Olá!
       
      Estou fazendo o upload de arquivos com fetch dessa forma
      fetch(url, {
              method: 'POST',
              headers: {'Content-Type': 'multipart/form-data',},
              body: formData 
          }).catch((error) => (console.log("Problemas com o Upload"), error));
       
      estou usando input type=file
      e criando uma const formData = new FormData(); 
      mas não faz e não dá nenhum erro.
      estou fazendo o upload com a url="http://localhost/dashboard/dados".
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.