dropzone.js 失败时无法正确重定向或呈现错误
dropzone.js not redirecting or rendering errors properly on failure
dropzone.js一切正常,但照片上传失败时除外。
如果提交的表格附有太大的照片或提交的表格没有照片,则会发生以下情况:
在 Heroku 控制台中
Started POST "/photos" for ...Processing by PhotosController#create as HTML
Completed 422 Unprocessable Entity ... method=POST path="/photos
然后浏览器显示示例。com/photos但是屏幕是空白的。
$(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'
});
结果:
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"
然后我们回到空白示例。com/photos
redirect_to new_photos_path
应该是 ->
redirect_to new_photo_path
dropzone.js一切正常,但照片上传失败时除外。
如果提交的表格附有太大的照片或提交的表格没有照片,则会发生以下情况:
在 Heroku 控制台中
Started POST "/photos" for ...Processing by PhotosController#create as HTML Completed 422 Unprocessable Entity ... method=POST path="/photos
然后浏览器显示示例。com/photos但是屏幕是空白的。
$(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'
});
结果:
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"
然后我们回到空白示例。com/photos
redirect_to new_photos_path
应该是 ->
redirect_to new_photo_path