AdvancedCustomFields / AdvancedCustomFields/acf

Form Image Upload Preview

Open
#522 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
PHP
Stars
945
Forks
197
PR merge metrics
No merged PRs in 30d

Description

Hi, have been using your Plugin for a couple months now and I am absolutely a big fan.
In some projects I have been using the acf_form() function.

Unfortunately images are not shown as a preview when selected.

I created a little snippet, which does so:


let file;
let regExp = /[0-9a-zA-Z\^\&\'\@\{\}\[\]\,\$\=\!\-\#\(\)\.\%\+\~\_ ]+$/;

$( '.acf-basic-uploader input[type="file"]' ).change(function(event) {
  file = '';
  file = this.files[0];

  if (file) {
    const reader = new FileReader();
    reader.onload = function () {
      const result = reader.result;

      var wrap = event.target.closest('.acf-image-uploader');
      elt = wrap.querySelector("div.image-wrap img");
      elt.src = result;

      var wrap_two = event.target.closest('.acf-field-image');
      wrap_two.classList.add("active");
    };
    reader.readAsDataURL(file);
  }

});

Just wanted to share it & maybe it will find its way in to the plugin :)
(it does support repeater fields as well)

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by tracing the acf_form() image-upload path and the .acf-basic-uploader input shown in the issue. Check how the .acf-image-uploader and .acf-field-image elements are updated, then verify that selecting an image displays its preview for regular and repeater fields.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, php
Domain
frontend, web-dev
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
50/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.