dropzone.js无法在失败时正确重定向或呈现错误 [英] dropzone.js not redirecting or rendering errors properly on failure

问题描述

dropzone.js 一切正常，除非照片无法上传。

Everything is working fine with dropzone.js except when a photo fails to upload.

如果提交的表单中附有太大的照片，或者提交的表单中没有照片，则会发生以下情况：

if the form is submitted with a photo attached that is too big or the form is submitted without a photo the following happens:

在Heroku控制台中

In Heroku Console

启动POST / photos，用于... PhotosController＃create as HTML处理
完成422无法处理的实体... method = POST path = / photos

Started POST "/photos" for ...Processing by PhotosController#create as HTML Completed 422 Unprocessable Entity ... method=POST path="/photos

然后浏览器显示example.com/photos，但屏幕空白

The browser then shows example.com/photos but the screen is blank.

$(document).ready(function() {
  var dropzone;
  Dropzone.autoDiscover = false;
  dropzone = new Dropzone('#dropform', {
    maxFiles: 1,
    maxFilesize: 1,
    paramName: 'photo[picture]',
    headers: {
      "X-CSRF-Token": $('meta[name="csrf-token"]').attr('content')
    },
    addRemoveLinks: true,
    clickable: '#image-preview',
    previewsContainer: '#image-preview',
    thumbnailWidth: 200,
    thumbnailHeight: 200,
    parallelUploads: 100,
    autoProcessQueue: false,
    uploadMultiple: false
  });
  $('#item-submit').click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    if (dropzone.getQueuedFiles().length > 0) {
      return dropzone.processQueue();
    } 
    else {
      return $('#dropform').submit();
    }

  });
  return dropzone.on('success', function(file, responseText) {
    return window.location.href = '/photos/' + responseText.id;
  });
  return dropzone.on('error', function(file, errorMessage, xhr) {
    console.log('error');
  });
});

PhotosController

def create
    @photo = current_user.photos.build(photo_params)
    respond_to do |format|
      if @photo.save!
        format.html { redirect_to @photo, notice: 'Photo was successfully created.' }
        format.json { render json: @photo } 
      else
        format.html { redirect_to new_photos_path, notice: 'Photo was not created'}
        format.json { redirect_to photos_path and return @photo.errors, status: :unprocessable_entity } 
      end
    end  
  end

编辑

return dropzone.on('error', function(file, errorMessage, xhr) {
  console.log('error');
  window.location.href = '/photos/new'
});

结果：

由PhotosController＃create作为HTML
开始POST / photos处理...在422毫秒内完成422无法处理的实体（ActiveRecord：14.5ms）
... method = GET path = / photos / new ... method = POST path = / photos

Started POST "/photos" Processing by PhotosController#create as HTML ...Completed 422 Unprocessable Entity in 422ms (ActiveRecord: 14.5ms) ...method=GET path="/photos/new"...method=POST path="/photos"

然后我们回到空白的example.com / photos

and then we are back to the blank example.com/photos

推荐答案

redirect_to new_photos_path 

应该是->

redirect_to new_photo_path

这篇关于dropzone.js无法在失败时正确重定向或呈现错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！