pille
/
oc-resizer-plugin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add: Remove a file

This commit is contained in:
philipp lang 2020-10-25 23:02:13 +01:00
parent 4115e3c9ab
commit a30e039cb6
6 changed files with 121 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
classes/FirstLetterStrategy.php
View File

@ -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';
}

34
classes/UploadStorage.php
View File

@ -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() {

69
formwidgets/Responsiveimage.php
View File

@ -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'));
}
/**

17
formwidgets/responsiveimage/assets/css/main.css
View File

@ -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;

44
formwidgets/responsiveimage/assets/src/App.vue
View File

@ -9,10 +9,12 @@
<span class="upload-button-icon oc-icon-upload"></span>
</a>
<vue-dropzone @vdropzone-sending="onSend" @vdropzone-thumbnail="onAdd" v-if="loaded" ref="dropzone" :id="id" :options="dropzoneOptions"></vue-dropzone>
<vue-dropzone @vdropzone-mounted="onMount" @vdropzone-removed-file="onRemove" @vdropzone-success="onUploadSuccess" @vdropzone-sending="onSend" @vdropzone-thumbnail="onAdd" v-if="loaded" ref="dropzone" :id="id" :options="dropzoneOptions"></vue-dropzone>
<div class="preview-container" ref="previewsContainer"></div>
<input type="hidden" :name="name" :value="asString">
<!-- Existing file -->
<!--
<div class="upload-files-container">
@ -85,19 +87,20 @@ export default {
header: {}
}
},
generalSettings: {
sidebarVisible: true
},
loaded: false
loaded: false,
content: []
};
},
components: { vueDropzone },
props: {
cropOptions: {},
mode: {
name: {
required: true
},
value: {
default: function() { return null; }
},
formid: {},
handlers: {}
},
@ -121,6 +124,9 @@ export default {
},
previewTemplate: `
<div class="cdz-preview">
<a href="#" data-dz-remove>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></svg>
</a>
<img data-dz-thumbnail />
<div class="details">
<div><span data-dz-name></span></div>
@ -132,7 +138,14 @@ export default {
}
},
methods: {
onUploadSuccess(file, response) {
this.content = response;
},
onAdd(file) {
if(file.manuallyAdded === true) {
return;
}
if (file.width < this.cropOptions.minWidth) {
console.log('zu klein');
$.oc.flashMsg({
@ -150,7 +163,6 @@ export default {
this.showPopup(file).then((ret) => {
this.extraData[file.name] = ret;
this.$refs.dropzone.processQueue();
console.log('AAA');
}).catch((err) => {
this.$refs.dropzone.removeFile(file);
this.addVisible = true;
@ -158,10 +170,28 @@ export default {
},
onSend(file, xhr, formData) {
formData.append('extraData', JSON.stringify(this.extraData[file.name]));
},
onMount() {
if (this.value === null) { return; }
this.addVisible = false;
var file = { size: this.value.size, name: this.value.name, type: this.value.type };
this.$refs.dropzone.manuallyAddFile(file, this.value.url);
},
onRemove(file, error, xhr) {
var _cls = this;
$(this.$el).request(this.handlers.onDelete, {
data: { fileName: file.name },
success: function(data) {
_cls.addVisible = true;
_cls.content = '';
}
});
}
},
mounted() {
this.loaded = true;
this.content = this.value;
var self = this;
}
};

11
formwidgets/responsiveimage/partials/_responsiveimage.htm
View File

@ -5,14 +5,15 @@
<?php else: ?>
<div data-responsiveimage>
<div>
<app formid="<?php echo $this->getId(); ?>" name="<?= $this->getFieldName() ?>" :handlers="{
onUpload: '<?= $this->getEventHandler('onUpload') ?>'
<app formid="<?php echo $this->getId(); ?>" name="<?= $name ?>" :handlers="{
onUpload: '<?= $this->getEventHandler('onUpload') ?>',
onDelete: '<?= $this->getEventHandler('onDelete') ?>'
}"
:crop-options="{
aspectRatio: <?= $this->aspectRatio ?: 'null' ?>,
minWidth: <?= $this->minWidth ?: '0' ?>,
aspectRatio: <?= $aspectRatio ?>,
minWidth: <?= $minWidth ?>,
}"
mode="<?= $this->displayMode ?>"
:value="<?= $value; ?>"
></app>
</div>
</div>