Uma nova era para uploads de arquivos no Discourse

Você pode ter notado, nos últimos meses, muitos commits relacionados a uploads no core do Discourse. Isso faz parte de um esforço geral no core para substituir o uso do jQuery file upload em nossa base de código, como parte de um esforço ainda mais amplo para substituir o uso do próprio jQuery em nossa base de código. O jQuery file uploader é um projeto muito antigo e faz parte do core do Discourse desde o início. Acho que o usei durante toda a minha carreira em outros projetos também. Mas é hora de aposentar o Velho Confiável:

Substituímos o jQuery file upload (e em breve também substituiremos outra biblioteca, resumable.js) por uma biblioteca chamada Uppy. Esta é uma biblioteca de upload muito mais moderna, facilmente extensível com plugins e capaz de lidar com todos os diferentes fluxos de trabalho que apresentamos a ela. Importante, isso nos permite fazer uploads multipart diretos para o S3 do cliente Discourse, em vez de ter que enviar arquivos grandes através de nossa API.

O composer agora usa o Uppy para todos os uploads, e muitos outros locais no aplicativo o utilizam (uploads de avatar, uploads de fundo de perfil, etc.). Os últimos pontos de resistência desaparecerão nas próximas semanas. Esta deve ser uma mudança em grande parte invisível para a maioria dos usuários, mas os autores de plugins e componentes de temas precisarão fazer algumas alterações.

API de Plugins

Pré-processadores

Todos os pré-processadores de upload agora precisam ser escritos como um plugin Uppy. Esses plugins são bastante simples de escrever e usam um fluxo de trabalho simples baseado em promessas. Um pré-processador de upload pode modificar um arquivo ou adicionar metadados a ele antes que o Uppy o carregue para o S3 ou para o endpoint /uploads.json. Já temos vários pré-processadores no core que você pode usar como referência ao escrever os seus:

Os pré-processadores de upload para o composer são registrados via api.addComposerUploadPreProcessor usando a API de plugins:

Manipuladores de Upload

Os manipuladores de upload não são escritos como plugins Uppy; eles ainda funcionam como sempre, com uma pequena alteração. Agora, quando um arquivo corresponde a uma extensão registrada em um manipulador de upload, todos os arquivos correspondentes serão enviados de uma vez. Anteriormente, apenas um arquivo por vez era enviado ao manipulador de upload, e agora um array é enviado:

Arquivos manipulados por um manipulador de upload não serão processados ​​posteriormente no pipeline de upload do Uppy. Os pré-processadores são executados antes que os manipuladores de upload sejam invocados.

Uploads Diretos Multipart para S3

Anteriormente, mencionei que nosso uso do Uppy também nos permite fazer uploads multipart diretos para o S3 a partir da interface do usuário. Para habilitar este recurso, você precisa definir a configuração do site enable_direct_s3_uploads como true.

Se você estiver hospedado conosco, as permissões S3 relevantes já foram aplicadas ao seu bucket. No entanto, se você estiver auto-hospedando, várias permissões e regras CORS devem ser configuradas em seu bucket para que isso funcione.

Para as regras CORS, você só precisa executar a tarefa rake s3:ensure_cors_rules com rake s3:ensure_cors_rules. Ela adicionará as seguintes regras ao seu bucket, desde que você tenha as permissões S3:GetBucketCors e S3:PutBucketCors habilitadas para qualquer chave de acesso e segredo que você configurou para suas credenciais S3 em sua instância do Discourse.

{
  "AllowedHeaders": [
    "Authorization",
    "Content-Disposition",
    "Content-Type"
  ],
  "AllowedMethods": [
    "GET",
    "HEAD",
    "PUT"
  ],
  "AllowedOrigins": [
    "*"
  ],
  "ExposeHeaders": [
    "ETag"
  ],
  "MaxAgeSeconds": 3000
}

Para as permissões, você precisará ter as seguintes permissões habilitadas para qualquer chave de acesso e segredo que você configurou para suas credenciais S3 em sua instância do Discourse.

{
    "Sid": "YourSid",
    "Effect": "Allow",
    "Action": [
        "s3:PutObjectVersionAcl",
        "s3:PutObjectAcl",
        "s3:PutObject",
        "s3:GetObjectAcl",
        "s3:GetObject",
        "s3:DeleteObject",
        "s3:CreateMultipartUpload",
        "s3:CompleteMultipartUpload",
        "s3:AbortMultipartUpload"
    ],
    "Resource": [
        "YOUR_RESOURCE"
    ]
}

Este tem sido um processo de vários meses e ainda não terminamos! Postarei neste tópico quando estivermos prestes a remover completamente o jQuery file uploader e o resumable.js do core do Discourse. Me avise se tiver alguma dúvida sobre o que postei aqui!

49 curtidas

5 posts foram movidos para um novo tópico: Uppy não funciona no Firefox 68

itsgoneitsdone

Com esses dois commits, o jQuery file uploader e o resumable.js não fazem mais parte do core do Discourse:

Eu fiz o meu melhor para remover todas as referências a isso e ao nosso antigo UploadMixin em todos os plugins que conhecemos, mas pode ter havido alguns que eu perdi ou dos quais não estou ciente. Não se preocupe, o processo de migração é fácil. 99% dos casos de uso podem simplesmente usar nosso novo UppyUploadMixin como um substituto direto com mudanças mínimas necessárias. Para um exemplo, dê uma olhada aqui:

Para os outros 1%, você pode criar uma instância do Uppy e se conectar aos eventos diretamente. Para um exemplo, dê uma olhada aqui:

Eu também cobri as mudanças nos plugins no OP deste tópico. Ainda temos algumas semanas até o nosso próximo lançamento, então se alguém tiver algum problema, por favor, relate-o aqui. Foi uma jornada e tanto! :roller_coaster:

14 curtidas

Por outro lado, a documentação da API foi atualizada com os novos endpoints de Upload. Acesse Discourse API Docs para ver.

(cc @mattdm, você pode se interessar por isso)

6 curtidas

Após habilitar o upload direto do S3, estamos recebendo relatos de usuários na China que não conseguem fazer upload de imagens — o processo fica travado em 0% e expira.

O primeiro pensamento pode ser que o S3 esteja bloqueado na China, mas sabemos com certeza que não é o caso — pelo menos não totalmente: nossos usuários da China conseguem ver as imagens armazenadas no S3 normalmente (o bucket na região eu-central-1 no nosso caso). Mas, de alguma forma, apenas o upload não parece funcionar.

Isso é difícil de depurar sem estar atrás do GFW, mas alguns de nossos usuários na China mencionaram que uma diferença talvez relevante parece ser que as imagens são carregadas usando o endpoint de pilha dupla, mas o upload usa o endpoint regular (apenas IPv4) (nome-do-bucket.s3.dualstack.eu-central-1.amazonaws.com vs nome-do-bucket.s3.eu-central-1.amazonaws.com). A partir de alguns testes, vemos que de fato parece ser o caso, mas não tenho certeza se isso é intencional ou necessário para fins de upload.

Talvez mais revelador seja que alguns relataram que, ao adicionar um IP resolvido do nome de host de pilha dupla ao seu arquivo de hosts (para o nome de host que não é de pilha dupla), o problema foi totalmente superado e eles conseguiram fazer o upload apenas com essa alteração.

Não sei se a equipe do Discourse tem alguém localizado na China que possa ajudar a depurar isso melhor?

4 curtidas

Uma publicação foi dividida em um novo tópico: Error while configuring S3: actions do not exist