I have imported Dropzone + Dropify into my importmap, and they're present in my importmap.php
:
'dropify' => [
'version' => '0.2.2',
],
'dropzone' => [
'version' => '6.0.0-beta.2',
],
'dropify/dist/css/dropify.min.css' => [
'version' => '0.2.2',
'type' => 'css',
],
'dropzone/dist/dropzone.css' => [
'version' => '6.0.0-beta.2',
'type' => 'css',
],
And I've added it to my assets/app.js
:
// assets/app.js
import './entrypoints/dropzone.js';
// assets/entrypoints/dropzone.js
import '../vendor/dropzone/dist/dropzone.css';
import '../vendor/dropify/dist/css/dropify.min.css';
import './provide_dropzone.js';
import 'dropify';
import '../js/pages/form-fileuploads.init.js';
// provide_dropzone.js
import Dropzone from 'dropzone';
window.Dropzone = Dropzone;
// assets/js/pages/form-fileuploads.init.js
if ($('[data-plugins="dropify"]').length > 0) {
// Dropify
$('[data-plugins="dropify"]').dropify({
messages: {
'default': 'Drag and drop a file here or click',
'replace': 'Drag and drop or click to replace',
'remove': 'Remove',
'error': 'Ooops, something wrong appended.'
},
error: {
'fileSize': 'The file size is too big (1M max).'
}
});
}
The fonts Dropify uses are present at both assets/fonts/
and assets/vendor/dropify/dist/fonts/
, which is where importmap:require
installed them.
However, when I use Dropify, the icon is broken:
<input id="attachment" type="file" data-plugins="dropify" data-height="300">
Screenshot of broken upload font
I get a bunch of Javascript console errors like this:
downloadable font: download failed (font-family: "dropify" style:normal weight:400 stretch:100 src index:1): status=2147746065 source: https://localhost/assets/vendor/dropify/dist/fonts/dropify-o8O5LG9.woff
downloadable font: download failed (font-family: "dropify" style:normal weight:400 stretch:100 src index:2): status=2147746065 source: https://localhost/assets/vendor/dropify/dist/fonts/dropify-C4fbjNS.ttf
Despite this being the exact directory these fonts are located, and Asset Mapper seems to be versioning them...
I can see the CSS I retrieved from NPM is referencing fonts here:
@font-face{font-family:dropify;src:url(../fonts/dropify.eot);src:url(../fonts/dropify.eot#iefix) format("embedded-opentype"),url(../fonts/dropify.woff) format("woff"),url(../fonts/dropify.ttf) format("truetype"),url(../fonts/dropify.svg#dropify) format("svg");font-weight:400;font-style:normal}
This is accurate relative to the CSS file. But it doesn't appear to be working.
I've also had the same issue getting fonts to work with SCSS files and the SassBundle. I'm not sure what the best way to deal with fonts in Asset Mapper is and there doesn't seem to be any documentation on it.
As some final setup info, I've got this project building in Docker Compose with Caddy, MariaDB, and the Alpine PHP image. My Caddyfile looks like this:
localhost
root * /var/www/projectroot/public
encode zstd gzip
log
file_server
php_fastcgi php:9000 {
index index.php
}
@phpFile {
path *.php*
}
error @phpFile "Not found" 404
My Dockerfile for php:alpine
looks like this:
FROM php:fpm-alpine
ADD --chmod=0755 https://github.com/mlocati/docker-php-extension-installer/releases/latest/download/install-php-extensions /usr/local/bin/
RUN install-php-extensions gd ctype iconv pcre session xml tokenizer dom intl pdo_mysql mysqli
RUN php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" \
&& php -r "if (hash_file('sha384', 'composer-setup.php') === 'dac665fdc30fdd8ec78b38b9800061b4150413ff2e3b6f88543c636f7cd84f6db9189d43a81e5503cda447da73c7e5b6') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;" \
&& php composer-setup.php \
&& php -r "unlink('composer-setup.php');" \
&& mv composer.phar /usr/local/bin/composer
The proposed setup in my question works perfectly. I realized I hadn't restarted the Caddy container for a while. When I checked the Caddyfile, it actually contained some lines from a previous attempt at getting fonts working:
@fonts {
path .woff *.woff2 *.ttf *.eot *.svg path_regexp \.(woff|woff2|ttf|eot|svg)$
}
handle @fonts {
header Cache-Control "public, max-age=31536000"
header Access-Control-Allow-Origin ""
file_server
}
Removing this and restarting the Caddy container with the Caddyfile I provided in the question worked.