Ao arrastar uma imagem não selecionada em um editor de texto rico, ela é carregada repetidamente

Não tenho certeza se isso é um problema de design, mas por enquanto vou categorizá-lo aqui.

Carregue uma imagem no editor de texto rico:

  • Se você clicar nela (o que a seleciona) e depois arrastá-la, a imagem será movida. :smiley:
  • Se você arrastá-la sem clicar nela primeiro, ela será tratada como um novo recurso de imagem e a operação de upload será realizada novamente… :sweat_smile:

Fico confuso com o segundo cenário, pois acho que, independentemente de você clicar nela ou não, arrastar deve mover a posição da imagem, e não reenviá-la. :slightly_smiling_face:
Se isso não for um bug, mas um design intencional, qualquer pessoa é bem-vinda a me dizer em qual cenário o upload repetido seria utilizado. :grinning_face_with_smiling_eyes:

2 curtidas

Não consigo reproduzir isso :woman_shrugging: Talvez outra pessoa consiga.

Qual navegador você está usando?

Navegador Edge, versão 145.0.3800.82. Acabei de atualizar para a 148.0.3967.54, mas não houve melhoria.

Sim, espero que alguém consiga reproduzir com sucesso. :face_with_head_bandage:
Só posso confirmar que esse problema existe, mas não sei qual é a causa específica.
Inicialmente, um usuário do meu site me relatou que encontrou esse problema ao arrastar uma imagem que havia enviado. Na época, também tive dificuldade em reproduzir, a menos que copiasse diretamente o Markdown que o usuário usou para fazer o upload da imagem. Parece estar relacionado tanto ao site quanto ao próprio anexo (todas as imagens com problemas parecem ser arquivos PNG), e não consegui reproduzir no Meta também (mesmo fazendo o upload do mesmo anexo no Meta), então esse problema foi deixado de lado.
No dia em que criei este tópico, tive uma ideia repentina e tentei usar a imagem PNG do logotipo padrão do Discourse do vídeo, e finalmente consegui reproduzir o problema no Meta. No entanto, quando tentei novamente hoje, parece que essa imagem não pode mais ser referenciada — o material de teste que reproduziu com sucesso o problema no Meta sumiu novamente. :face_with_spiral_eyes:

Em resumo, este é realmente um caso limítrofe muito difícil de acionar, mas, uma vez acionado, ele se reproduz de forma estável para o mesmo anexo do mesmo site.

Não, desculpe, não importa como eu tente arrastar, mesmo com o logotipo de exemplo, não consigo acionar o problema.

Não tenho o Edge pronto para testar, então talvez seja algo relacionado ao navegador. Você pode testar em um navegador Chromium?

Olá, tentando (no Edge, Versão 148.0.3967.54 (Build oficial) (64 bits)) ajudar nos testes para este bug…


Este é o texto após a imagem

2 curtidas

O Edge não é um navegador Chromium?

Hmm… Tentei reproduzir esse bug, mas até agora não consegui. Se você puder ser mais específico, tentarei novamente e relatarei meus resultados.

2 curtidas

Não entendi — como você consegue arrastá-lo sem clicar nele primeiro?

Vejo que, em sua postagem, há duas ocorrências de ![image](/images/discourse-logo-sketch-small.png). Isso é resultado de uma reprodução bem-sucedida? Ou seja: você consegue reproduzir o problema usando o logotipo pequeno, mas não consegue reproduzi-lo usando a foto do seu gato?

Primeiro, coloque o cursor sobre outro trecho de texto, em seguida, pressione e segure o botão esquerdo do mouse sobre a imagem e arraste diretamente. Se você clicar (e soltar) primeiro e depois arrastar, a imagem será selecionada.

OK, no Edge, e usando o RTE, começando do zero para tentar…

fazendo upload de uma nova imagem abaixo…

… e agora arrastando a imagem para abaixo do próximo parágrafo..

Aqui está o próximo parágrafo…

Este é o próximo parágrafo. Agora vou arrastar a imagem para abaixo daqui…

No teste acima (realizado na versão mais recente do Edge, com o RTE no editor do Discourse), arrastar a imagem carregada anteriormente pareceu funcionar corretamente – não vi nenhuma indicação para reenviá-la?

Talvez você tenha a sorte de nunca ter encontrado esse bug :smiley:, mas, independentemente disso, no vídeo abaixo eu demonstro o fluxo de pressionamento de teclas que dispara as duas operações, upload e mover, usando o KeyCastOW, para que você e outros possam entender claramente o processo específico.


Upload - Pressione o botão esquerdo do mouse e arraste diretamente


Mover - Pressione o botão esquerdo do mouse para clicar e, em seguida, arraste

A propósito, acabei de testar usando seu gato (![image](https://d11a6trkgmumsb.cloudfront.net/original/4X/c/8/4/c84af711be6e56b1fa1500710edd6869364935da.png)) e sua outra imagem (![image](https://d11a6trkgmumsb.cloudfront.net/original/4X/8/9/8/89898942816045cca658884fa050bacd20f3cdfb.jpeg)), e descobri que nenhuma delas conseguiu disparar esse problema.

Sugiro que use ![image](/images/discourse-logo-sketch-small.png) para testar; pelo menos, é um material de teste que, até onde sei, reproduz o problema de forma confiável. Se você não conseguir reproduzir o problema usando essa imagem, talvez seja apenas tão sortudo. :wink:

Será que esse problema se limita a esta imagem em particular?


Abaixo, os dois seguintes foram colados no editor em modo RTE…

![image](/images/discourse-logo-sketch-small.png)

![image](/images/discourse-logo-sketch-small.png)


Abaixo, mais dois foram colados no editor em modo Markdown

!\[image\](/images/discourse-logo-sketch-small.png)

Nessa segunda situação, você está dizendo que duas instâncias/cópias diferentes da imagem/arquivo estão sendo enviadas e que dois arquivos são então armazenados no servidor?

Ou que a imagem colada não é realmente enviada ao servidor até que (após o envio) você clique nela (e apenas aquela instância da imagem/arquivo seja enviada e armazenada no servidor)?

Não, há várias imagens no meu próprio site que conseguem reproduzir o problema, mas não fiz muita investigação sobre o Meta e até agora encontrei apenas esse caso.

Não, na verdade o Discourse é mais inteligente do que pensávamos. Por exemplo:
Um usuário do meu site carregou uma imagem, e no editor Markdown ela aparece assim:

...
![pic|370x494, 40%](upload://jqrVvqCoYL0wuOvUZWTDwhYw8IU.jpeg)
...

Obtive seu link completo através das ferramentas de desenvolvedor do navegador: https://example.com/uploads/default/original/1X/8826bc6c1be0e501979df4a004b9b2ae51c50320.jpeg. Então, referenciei a imagem no editor usando o formato de link completo:

![image](https://example.com/uploads/default/original/1X/8826bc6c1be0e501979df4a004b9b2ae51c50320.jpeg)

Depois de arrastar sem clicar (acionando um carregamento) no editor de texto rico, o conteúdo no editor Markdown fica assim:

![image](https://example.com/uploads/default/original/1X/8826bc6c1be0e501979df4a004b9b2ae51c50320.jpeg)

![image|370x494](upload://jqrVvqCoYL0wuOvUZWTDwhYw8IU.jpeg)

Pode-se ver que, embora o Discourse mostre que arrastar aciona um carregamento, a imagem na verdade aparece como ![image|370x494](upload://jqrVvqCoYL0wuOvUZWTDwhYw8IU.jpeg), o que corresponde ao mesmo anexo originalmente carregado por aquele usuário como https://example.com/uploads/default/original/1X/8826bc6c1be0e501979df4a004b9b2ae51c50320.jpeg.

  • Arrastar uma imagem referenciada no formato ![image|370x494](upload://jqrVvqCoYL0wuOvUZWTDwhYw8IU.jpeg) também resulta no mesmo tratamento.

Dessa perspectiva, acionar um carregamento novamente na verdade não ocupa espaço de armazenamento adicional — apenas o primeiro arquivo carregado realmente ocupa armazenamento no servidor. Então, é apenas um problema de experiência do usuário: os usuários ficam confusos sobre “por que arrastar uma imagem (quando eu clico e arrasto sem soltar o mouse) não se move conforme o esperado, mas em vez disso mostra um carregamento em andamento e duplica a imagem?”

1 curtida

Então, por enquanto, eu concluiria que (boa notícia!) parece que a imagem não é realmente enviada repetidamente, mas que apenas uma instância dela é enviada(?).

1 curtida