Jump to content

auto resize images on upload or use admin image upload frontend


webhoes
 Share

Recommended Posts

I use uikit v3 upload component to upload images. This works, but if the image is too big, that page crashed completely.

I would like to either resize all images to max width 900 px on upload or use the same upload upload code as the pw backend does.

I currently use this code.

<div class="js-upload" uk-form-custom>
    <input type="file" multiple>
    <button class="uk-button uk-button-default" type="button" tabindex="-1" onsubmit="validate()">Upload</button>
</div>

<progress id="js-progressbar" class="uk-progress" value="0" max="100"></progress>
<?php $uploadPath = '/upload.php?pid=' . $page->id;
$uploadPath = $sanitizer->url($uploadPath);
?>
<script>

    var bar = document.getElementById('js-progressbar');

    UIkit.upload('.js-upload', {

        url: '<?php echo $uploadPath;?>',
        multiple: true,

        beforeSend: function () {

            console.log('beforeSend', arguments);
        },
        beforeAll: function () {
            console.log('beforeAll', arguments);
        },
        load: function () {
            console.log('load', arguments);
        },
        error: function () {
            console.log('error', arguments);
        },
        complete: function () {
            console.log('complete', arguments);
        },

        loadStart: function (e) {
            console.log('loadStart', arguments);

            bar.removeAttribute('hidden');
            bar.max = e.total;
            bar.value = e.loaded;
        },

        progress: function (e) {
            console.log('progress', arguments);

            bar.max = e.total;
            bar.value = e.loaded;
        },

        loadEnd: function (e) {
            console.log('loadEnd', arguments);

            bar.max = e.total;
            bar.value = e.loaded;
        },

        completeAll: function () {
            console.log('completeAll', arguments);

            setTimeout(function () {
                bar.setAttribute('hidden', 'hidden');
            }, 1000);

            alert('Upload Completed');
            location.reload();

        }

    });

</script>

 

and this is upload.php

<?php namespace ProcessWire;

include './index.php';

$p = $pages->get($input->get->pid);
//$p = $pages->get($_GET["pid"]);
$p = wire('pages')->get($_GET["pid"]);

//echo barDumpLive($p);
if(isset($_FILES['files'])) {

    $file_tmp = $_FILES['files']['tmp_name'][0];
    $file_ext = pathinfo($_FILES['files']['name'][0], PATHINFO_EXTENSION);
    $extensions = array("jpeg","jpg","png", "gif");

    if(in_array($file_ext, $extensions) === true) {
/*
        $original = $file_tmp.$file_ext;
        $options  = array('upscaling' => false, 'quality' => 100);

        $imageSizer = new ImageSizer($p->images->path().$original, $options);
        $success    = $imageSizer->resize(500, 500);

        if ($success)
*/
        //$file_tmp.$file_ext->width(800); //change width to 800 to avoid images that are too large
        $p->images->add($file_tmp);
    }

    $p->save('images');
}

 

I have tried several option in resizing but the moment I change the code it stops working.

Where should I implement a solution?

Or the other option is to use the inputfieldImage on the fontend. I could not get that to actually upload an image.

 

 

Link to comment
Share on other sites

7 minutes ago, webhoes said:

I use uikit v3 upload component to upload images.

I'd highly recommend to stay in the pw backend if possible. What is the reason for using the frontend?

If you are inside the admin it should be easy to resize the images after they where added: 

if you are uploading lots of large images you might need to implement some kind of queue though...

Link to comment
Share on other sites

@bernhard I use the frontend because all the user don't have acces rights to the backend. I have created a pseudobackend where they can add or change their own specific pages. This is the way to keep them from seeing the pw backend and each others pages and being able to edit each others pages (has got sensitive material).

from the pw backend I have set the limits, but with api upload these are bypassed.

If possible I would like to use the same modules as the backend, but then in a pseudobackend page/form. Could not get this working. Now it is all forms and api's.

 

Link to comment
Share on other sites

35 minutes ago, webhoes said:

If possible I would like to use the same modules as the backend, but then in a pseudobackend page/form. Could not get this working. Now it is all forms and api's.

https://github.com/processwire/processwire/blob/dev/wire/modules/Inputfield/InputfieldImage/PWImageResizer.js

It has some example code as well. I've never tried to utilize it though...

It is based on this one https://github.com/rossturner/HTML5-ImageUploader as described by Ryan here: https://processwire.com/blog/posts/processwire-3.0.63-adds-client-side-image-resizing/

Hope this helps.

Edited by szabesz
missing link
Link to comment
Share on other sites

27 minutes ago, webhoes said:

from the pw backend I have set the limits, but with api upload these are bypassed.

Don't understand that part

27 minutes ago, webhoes said:

If possible I would like to use the same modules as the backend, but then in a pseudobackend page/form. Could not get this working. Now it is all forms and api's.

That's why I would recommend doing it the other way round: Stay in the backend and modify it to your needs. It's really simpler than you might think. And of course a lot safer! For example I don't see any access control checks in your upload scripts... You don't need to care about that in the backend. Just use PW's internal access control system and you're done.

But of course you can also do all that from the frontend. Don't want to convince you. It's your choice ? 

1 hour ago, webhoes said:

I have tried several option in resizing but the moment I change the code it stops working.

A better explanation, screenshots, copy of logfiles etc. would help...

 

1 hour ago, webhoes said:

Or the other option is to use the inputfieldImage on the fontend. I could not get that to actually upload an image.

Once more: I think it is really a lot easier to create custom admin pages (processmodules) and using all the pw features (fields) than creating a custom frontend. But if you really want (or need) to stay in the frontend I'm sorry, I can't help ? 

Link to comment
Share on other sites

1 hour ago, webhoes said:

I use the frontend because all the user don't have acces rights to the backend

I second @bernhard's suggestions: There are some very handy tools out there (both core config options + methods, and 3rd-party modules) which will enable you to create customized, fine-grained access controls / roles / permissions.

I have access to a PW site where I have editor rights - I can create my own events, upload my images/files, edit my company profile etc. - without seeing any of the other stuff that's up there. (well, actually I see them in the tree, but I can't edit them - I guess even that could be configured).

Link to comment
Share on other sites

@bernhard if there is another safe way to give user edit rights and still make sure they can't see or edite pages of others I don't mind changing letting them in the backend and create processmodule pages.

Current pseudo backend looks like this.

image.thumb.png.253551925f638ccb05699eb7364e44bb.png

 

Everything  a user adds is private and may not be seen by another or changed by another.

The only exception is the classifieds section which is to be seen in the frontend (but also in the backend only for the user who made it).

I see in your article that you also use forms. But then I would need to apply the same logic as I do now (or lacking to have done now).

What would I need to do If don't want anyone to see the standard pw backend (including the tree). And only have them see somthing like image above, but if they click on 'edit' they can use the pw backend for adding/changing text and images (with use of all the backend security present) of that particular page.

Or use the page tree and make sure everything they did not make is hidden (except for the parent templates). Turtles is parent for turtle. They did not create the Turtles page but it groups all turtles from all users. That would be something like this

Turtles

   turtle 2

Grourps

    group 1

Classifieds

     classified 4

    classified 7

Another user would see different pages.

I did tried something like this before, but could not get this running correctly.

ohjah, the site is multilangual and with the api the title and name are synchronized on save. Also the name is based on userid and a timestamp so no user can have the same name. Title can be the same as this does not creates issues.

 

I know a lot of questions, but I am quite proud of how far I cam so far, but are still far from being a programmer and understanding how it all works.

 

 

 

 

 

  • Like 1
Link to comment
Share on other sites

hey @webhoes

you get some informations here: 

Unfortunately it does not seem to be so easy to get a solution that works everywhere (in the tree, in search results, etc). Maybe @adrian has some new information on that topic?

Maybe it's easier to stay in the frontend in your case, since it seems that you already did quite a lot there. I don't know. Of course it is also possible to do the image upload from the frontend. You need to provide a better explanation of what is going wrong then.

 

Link to comment
Share on other sites

8 hours ago, bernhard said:

Unfortunately it does not seem to be so easy to get a solution that works everywhere (in the tree, in search results, etc). Maybe @adrian has some new information on that topic?

AdminRestrictBranch (https://processwire.com/talk/topic/11499-admin-restrict-branch/) might actually suit your needs as it takes care of the page tree, search results - everything really.

  • Like 1
Link to comment
Share on other sites

25 minutes ago, adrian said:

AdminRestrictBranch (https://processwire.com/talk/topic/11499-admin-restrict-branch/) might actually suit your needs as it takes care of the page tree, search results - everything really.

thx @adrian. I knew about AdminRestrictBranch, but he'd need to setup the structure so that all of the user's data is under one branch, correct? Is it still a "hacky" solution? I remember that you discussed with ryan about the numchildren that was not hookable at that time. Did anything change? Would it be easier nowadays to just hide certain pages or do you think AdminRestrictBranch is still the best (only) option?

Link to comment
Share on other sites

Hey @bernhard - the issue with the num of children is still there, but it doesn't affect the ARB module because it only shows the one branch that the user is allowed to see. I don't think ARB is hacky - I think it's a good solution if it works for your use case.

Some of the gists linked to in that post above however are a bit hacky - they don't handle lots of things (like search results) and also have the num children issue and also the problem of hiding a parent of a child that the user might actually have rights to.

  • Like 2
Link to comment
Share on other sites

Thx for the clarification @adrian. Ok, if the usecase fits it seems to be a good solution, but I wished there was a good way to have better and easier control of which pages are shown inside the admin or inside the tree. Taking care of all that tedious stuff (search, pagination etc).

  • Like 2
Link to comment
Share on other sites

Interesting stuff... 

But what is defined as one branch? Is that one of the first childs of Home? If so, how would you deal with multiple branches that should all be treated equally?

User may only see and edit childs of those branches he created himself? And to make it a little more complicated, some of those pages also contain child pages to which only the creating user should have access.

Link to comment
Share on other sites

10 hours ago, webhoes said:

But what is defined as one branch? Is that one of the first childs of Home? If so, how would you deal with multiple branches that should all be treated equally?

One branch is any page you choose and all its children, grandchildren, etc. It does not allow for giving a user access to multiple separate branches.

Link to comment
Share on other sites

I did test this some time ago.

To make this work I would have to make a user specific branch upon registering and dynamicaly give that user rights to that particular branch.

that branch would contain all data for that user different child pages.

I think that would be difficult to achieve and maintain.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...