Giter Club home page Giter Club logo

acf-dropzone's Introduction

ACF Dropzone

This is the official github repository of the ACF Dropzone plugin.

About

Add drag and drop upload to ACF File Field, Image field and Gallery field.

Requires at least WP 5.0 and ACF 5.6.

Usage

Enable the "Dropzone" option in the field settings.

Dropzone Setting

Enjoy your new dropping experience!

Happy Dropping

Installation

Production

In WP Admin

Just follow the Automatic Plugin Installation procedere.

WP-CLI

$ wp plugin install --activate acf-dropzone

Using composer

composer require mcguffin/acf-dropzone

Development

  • cd into your plugin directory
  • $ git clone [email protected]:mcguffin/acf-dropzone.git
  • $ cd acf-dropzone
  • $ npm install
  • $ npm run dev

Plugin API

To add dropzone capability to arbitrary field types you can use the acf_dropzone/file_fields and acf_dropzone/gallery_fields filter.

This might come in handy if you use the feature image field type of ACF Frontend, or something alike.

Adding support for ACF Frontend‘s featured_image field:

add_filter( 'acf_dropzone/file_fields', function($fields) {
	$fields[] = 'featured_image';
	return $fields;
});

Please note that the field input HTML needs to be exactly as the one provided by ACF, so filters won't work on any field.

acf-dropzone's People

Contributors

dependabot[bot] avatar mcguffin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

manutemaia

acf-dropzone's Issues

Doesn't work in Frontend Admin ACF

I have a WordPress installation with the DIVI theme, ACF PRO and Frontend Admin ACF.

I've noticed that the container of the dropzone doesn't show in the frontend form.

image

Call to undefined function AcfDropzone\Compat\get_current_screen()

Hello there,

When loading a advanced form via AJAX, I sometimes get this

PHP Fatal error:  Uncaught Error: Call to undefined function AcfDropzone\Compat\get_current_screen() in **/wp-content/plugins/acf-dropzone/include/AcfDropzone/Compat/ACF.php:128
Stack trace:
#0 **/wp-includes/class-wp-hook.php(287): AcfDropzone\Compat\ACF->print_media_templates()
#1 **/wp-includes/class-wp-hook.php(311): WP_Hook->apply_filters()
#2 **/wp-includes/plugin.php(484): WP_Hook->do_action()
#3 **/wp-includes/media-template.php(1512): do_action()
#4 **/wp-includes/class-wp-hook.php(287): wp_print_media_templates()
#5 **/wp-includes/class-wp-hook.php(311): WP_Hook->apply_filters()
#6 **/wp-includes/plugin.php(484): WP_Hook->do_action()
#7 **/wp-includes/general-template.php(3021): do_action() in **/wp-content/plugins/acf-dropzone/include/AcfDropzone/Compat/ACF.php on line 128

After googling a while, I circumvented it the same way ACF Pro does - that is by checking if the function exists first, as explained here

I don't know if this is the optimal solution, or if it breaks something, but it seems to work for me.
I changed line 128 of acf-dropzone/include/AcfDropzone/Compat/ACF.php
from } else if ( $screen = get_current_screen() ) **{**
to } else if ( function_exists( 'get_current_screen' ) && $screen = get_current_screen() ) {

Doesn't work using Flexible Content Duplicate Button

When using the flexible content field type and you click the duplicate button, it messes up the dropzone in terms of you can't drop any additional images, even after removing any existing ones on the newly duplicated field. It shows the option to drop but just opens in a new window.

Image Preview

Hi Jörn,

Is there meant to be an image preview once the image has uploaded via drop zone? In the same way, the image is previewed when uploaded normally.

Currently when the image has uploaded the UI returns to 'Drop files here or Add image (button)' and doesn't display the uploaded image preview. However, the image has uploaded to the Media Library.

Thanks for the plugin.

When dropping a file too large in acf_form, the error message is showed twice

When dropping a file too large in acf_form, the error message is showed twice
I changed a bit the print_media_templates() error message to suits my needs. Couldn't allow the user to make the error message dismissible. (and it's translated)
I tried to upload an unauthorized file type, and the error message is showed twice too :/

       /**
	 *	@action print_media_templates
	 */
	public function print_media_templates() {
		?>
		<script type="text/html" id="tmpl-acf-dropzone-notice">
			<div class="acf-notice -error acf-error-message"><p>{{data.message}}</p></div>
		</script>
		<script ...


		<?php

	}

image

Doesn't work with Repeater fields

Hi there, great little plugin! Glad I came across it.

I've just tried it with a Repeater field, and what happens is, if there are no rows, the drag and drop won't work - for example if it is an image, the browser just opens the image as a file rather than dropping it on the repeater field (which should then make a row).

Also, if there are existing rows, it knows to drag and drop, but say I have multiple images selected, it'll upload all images, but pick the last one as the selected image on that row, and doesn't create new rows for all others.

Just thought it was worth a mention :)

Thanks

How to get ACF image field preview show up in the dropzone?

I want the default(or dropzone created) preview of uploaded image on ACF image field.

Steps to recreate:

  1. Select/drop file to dropzone
  2. The file preview does not show up

Expected Behaviour:
The uploaded file should show up as preview. At least the attached file details should be visible.

How can I disable the media library?

Hi!

I love your implementation of a Dropzone into ACF. It works like a charm. But I'm puzzled: how can I disable the Wordpress Media Library for users? I only want to allow them to drag/drop files and/or select files from their computer. I don't want them to have access to the WP Media Library.

I would really appreciate your help with this!

Thanks!
David

First image in Gallery as a Featured Image.

I am not sure if that's Is that Dropzone's issue or Gallery's itself issue, but... I have a function to set first image in Gallery as a Featured Image. If I reorder images in gallery, Featured Image does not reflect the change in order.

JS Hook for Dropzone Args? Passed Post ID?

Hello & thank you for putting together this plugin!

I'm trying to manage uploads by assigning them specific upload folders based on their post type. I'm doing so using the upload_dir filter hook and using the $_REQUEST array. To complicate this further, I'm using the ACF function acf_form() to do this on the frontend. Generally, WordPress will pass in a post_id in the $_REQUEST as well as the action, filename, etc. I was wondering if:

  1. There was a JS action hook ( like acf has? ) so I could manually add in the Post ID to pass to the request. I see that you're already passing in _acfuploader as the field key as as param which is cool so I would need to extend that.

  2. A mechanism built into the plugin that would also pass the Post ID along with the _acfuploader param to DropJS.

If I'm overlooking something on the WP side or in the ACF Drozone plugin that could help please let me know! Thanks again and I hope this finds you well!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.