diff --git a/classes/FirstLetterStrategy.php b/classes/FirstLetterStrategy.php
index d2f30bf..58911d1 100644
--- a/classes/FirstLetterStrategy.php
+++ b/classes/FirstLetterStrategy.php
@@ -20,6 +20,13 @@ class FirstLetterStrategy {
return pathinfo($filename, PATHINFO_FILENAME).'-'.$width.'.'.pathinfo($filename, PATHINFO_EXTENSION);
}
+ public function versionRegex($filename) {
+ $ext = preg_quote(pathinfo($filename, PATHINFO_EXTENSION), '/');
+ $name = preg_quote(pathinfo($filename, PATHINFO_FILENAME), '/');
+
+ return "/^{$name}-[0-9]+\.{$ext}$/";
+ }
+
public function croppedPath() {
return 'cropped';
}
diff --git a/classes/UploadStorage.php b/classes/UploadStorage.php
index 3b2e3bd..8a21417 100644
--- a/classes/UploadStorage.php
+++ b/classes/UploadStorage.php
@@ -30,7 +30,39 @@ class UploadStorage {
'crop' => $this->data['crop']
]);
- return $fileName;
+ return $sourcePath.'/'.$fileName;
+ }
+
+ public function getFileData($filename) {
+ $realname = preg_replace('/^source/', 'cropped', $filename);
+
+ return [
+ 'url' => $this->storage()->url($realname),
+ 'type' => $this->storage()->mimeType($filename),
+ 'size' => $this->storage()->size($filename),
+ 'name' => pathinfo($filename, PATHINFO_BASENAME)
+ ];
+ }
+
+ public function removeFile($filename) {
+ $sourcePath = $this->getStrategy()->sourcePath($filename).'/'.$filename;
+ $croppedPath = $this->getStrategy()->croppedPath().'/'.$filename;
+
+ if (!Storage::disk($this->disk)->exists($sourcePath)) {
+ return;
+ }
+
+ if (Storage::disk($this->disk)->exists($croppedPath)) {
+ Storage::disk($this->disk)->delete($croppedPath);
+ }
+
+ collect(Storage::disk($this->disk)->files($this->getStrategy()->publicPath($filename)))->filter(function($file) use ($filename) {
+ return preg_match($this->getStrategy()->versionRegex($filename), pathinfo($file, PATHINFO_BASENAME));
+ })->each(function($file) {
+ Storage::disk($this->disk)->delete($file);
+ });
+
+ Storage::disk($this->disk)->delete($sourcePath);
}
private function storage() {
diff --git a/formwidgets/Responsiveimage.php b/formwidgets/Responsiveimage.php
index 710a334..4c612e4 100644
--- a/formwidgets/Responsiveimage.php
+++ b/formwidgets/Responsiveimage.php
@@ -118,8 +118,11 @@ class Responsiveimage extends FormWidgetBase
*/
protected function prepareVars()
{
- $this->vars['aspectRatio'] = $this->aspectRatio;
- $this->vars['minWidth'] = $this->minWidth;
+ $this->vars['aspectRatio'] = $this->aspectRatio ?: 'null';
+ $this->vars['minWidth'] = $this->minWidth ?: '0';
+ $this->vars['name'] = $this->formField->getName();
+ $this->vars['value'] = str_replace('"', "'", json_encode($this->getLoadValue()));
+ $this->vars['model'] = $this->model;
}
/**
@@ -134,6 +137,15 @@ class Responsiveimage extends FormWidgetBase
return $record;
}
+ public function getLoadValue() {
+ $value = parent::getLoadValue();
+ if (!$value) {
+ return null;
+ }
+
+ return app(UploadStorage::class)->getFileData($value['file']);
+ }
+
/**
* Returns the escaped and translated prompt text to display according to the type.
* @return string
@@ -186,46 +198,6 @@ class Responsiveimage extends FormWidgetBase
return $cssDimensions;
}
- /**
- * Returns the specified accepted file types, or the default
- * based on the mode. Image mode will return:
- * - jpg,jpeg,bmp,png,gif,svg
- * @return string
- */
- public function getAcceptedFileTypes($includeDot = false)
- {
- $types = $this->fileTypes;
-
- if ($types === false) {
- $isImage = starts_with($this->getDisplayMode(), 'image');
- $types = implode(',', FileDefinitions::get($isImage ? 'imageExtensions' : 'defaultExtensions'));
- }
-
- if (!$types || $types == '*') {
- return null;
- }
-
- if (!is_array($types)) {
- $types = explode(',', $types);
- }
-
- $types = array_map(function ($value) use ($includeDot) {
- $value = trim($value);
-
- if (substr($value, 0, 1) == '.') {
- $value = substr($value, 1);
- }
-
- if ($includeDot) {
- $value = '.'.$value;
- }
-
- return $value;
- }, $types);
-
- return implode(',', $types);
- }
-
/**
* Removes a file attachment.
*/
@@ -281,7 +253,7 @@ class Responsiveimage extends FormWidgetBase
*/
public function getSaveValue($value)
{
- return FormField::NO_SAVE_DATA;
+ return $value ? json_decode($value) : null;
}
/**
@@ -300,9 +272,16 @@ class Responsiveimage extends FormWidgetBase
throw new ApplicationException('File is not valid');
}
- app(UploadStorage::class)->storeFileFromUpload($uploadedFile, $data);
+ $filename = app(UploadStorage::class)->storeFileFromUpload($uploadedFile, $data);
- return Response::make('', 200);
+ return Response::json([
+ 'file' => $filename,
+ 'data' => array_only($data, ['title', 'description'])
+ ], 200);
+ }
+
+ public function onDelete() {
+ app(UploadStorage::class)->removeFile(Input::get('fileName'));
}
/**
diff --git a/formwidgets/responsiveimage/assets/css/main.css b/formwidgets/responsiveimage/assets/css/main.css
index a6e31a4..9737200 100644
--- a/formwidgets/responsiveimage/assets/css/main.css
+++ b/formwidgets/responsiveimage/assets/css/main.css
@@ -169,6 +169,17 @@
position: relative;
background: white;
border: 1px solid rgba(0,0,0,0.2);
+ [data-dz-remove] {
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 2rem;
+ height: 2rem;
+ color: #333;
+ fill: currentColor;
+ margin-top: 0.5rem;
+ margin-right: 0.5rem;
+ }
div.details {
padding: 1rem;
flex: 1 0 0;
@@ -184,9 +195,9 @@
}
}
img {
- width: 15rem;
- height: 10rem;
- object-fit: cover;
+ width: 15rem !important;
+ height: 10rem !important;
+ object-fit: cover !important;
}
div.cdz-progress {
position: absolute;
diff --git a/formwidgets/responsiveimage/assets/src/App.vue b/formwidgets/responsiveimage/assets/src/App.vue
index c304758..d667140 100644
--- a/formwidgets/responsiveimage/assets/src/App.vue
+++ b/formwidgets/responsiveimage/assets/src/App.vue
@@ -9,10 +9,12 @@
-
+
+
+